{"name":"wallet-home-01","type":"registry:block","description":"Block: wallet-home-01","dependencies":["lucide-react"],"files":[{"path":"blocks/mobile-finance/wallet-home-01.tsx","content":"import { ArrowDownLeft, ArrowUpRight, CreditCard, ShieldCheck, Wallet } from 'lucide-react'\n\nimport { Badge } from '@/components/ui/badge'\nimport { Button } from '@/components/ui/button'\nimport { Card, CardContent } from '@/components/ui/card'\nimport { Progress } from '@/components/ui/progress'\n\nconst actions = [\n  { label: 'Send', icon: ArrowUpRight },\n  { label: 'Receive', icon: ArrowDownLeft },\n  { label: 'Cards', icon: CreditCard },\n]\n\nconst transactions = [\n  {\n    name: 'Figma',\n    amount: '-$24.00',\n    tone: 'bg-violet-100 text-violet-900 dark:bg-violet-400/15 dark:text-violet-200',\n  },\n  {\n    name: 'Stripe payout',\n    amount: '+$890.20',\n    tone: 'bg-emerald-100 text-emerald-900 dark:bg-emerald-400/15 dark:text-emerald-200',\n  },\n  {\n    name: 'Vercel',\n    amount: '-$20.00',\n    tone: 'bg-slate-100 text-slate-900 dark:bg-slate-400/15 dark:text-slate-200',\n  },\n]\n\nexport default function WalletHome01() {\n  return (\n    <section className=\"mx-auto flex min-h-dvh w-full max-w-md flex-col bg-background text-foreground\">\n      <header className=\"px-5 pb-4 pt-safe-top\">\n        <div className=\"flex items-center justify-between\">\n          <div>\n            <p className=\"text-xs font-medium text-muted-foreground\">Total balance</p>\n            <h1 className=\"mt-1 text-3xl font-semibold tracking-normal\">$24,892.48</h1>\n          </div>\n          <Button\n            aria-label=\"Security center\"\n            className=\"size-11 rounded-lg\"\n            size=\"icon\"\n            variant=\"outline\"\n          >\n            <ShieldCheck className=\"size-5\" />\n          </Button>\n        </div>\n      </header>\n\n      <main className=\"flex flex-1 flex-col gap-5 px-5 pb-safe-bottom\">\n        <div className=\"rounded-lg bg-foreground p-5 text-background shadow-sm\">\n          <div className=\"flex items-center justify-between\">\n            <Badge className=\"rounded-md bg-background/15 text-background hover:bg-background/20\">\n              Timkit Card\n            </Badge>\n            <Wallet className=\"size-6 opacity-80\" />\n          </div>\n          <div className=\"mt-12 flex items-end justify-between\">\n            <div>\n              <p className=\"text-xs text-background/60\">Monthly spend</p>\n              <p className=\"mt-1 text-xl font-semibold\">$3,240.18</p>\n            </div>\n            <p className=\"text-sm text-background/70\">**** 0924</p>\n          </div>\n        </div>\n\n        <div className=\"grid grid-cols-3 gap-3\">\n          {actions.map((action) => {\n            const Icon = action.icon\n            return (\n              <Button key={action.label} className=\"min-h-[56px] rounded-lg\" variant=\"secondary\">\n                <Icon className=\"mr-2 size-4\" />\n                {action.label}\n              </Button>\n            )\n          })}\n        </div>\n\n        <Card className=\"rounded-lg\">\n          <CardContent className=\"p-4\">\n            <div className=\"flex items-center justify-between gap-4\">\n              <div>\n                <h2 className=\"text-sm font-semibold\">Agent budget guard</h2>\n                <p className=\"mt-1 text-xs text-muted-foreground\">$1,840 left this month</p>\n              </div>\n              <span className=\"text-sm font-semibold\">62%</span>\n            </div>\n            <Progress className=\"mt-4 h-2\" value={62} />\n          </CardContent>\n        </Card>\n\n        <div>\n          <div className=\"mb-3 flex items-center justify-between\">\n            <h2 className=\"text-sm font-semibold\">Recent activity</h2>\n            <Button className=\"h-11 rounded-lg px-3\" variant=\"ghost\">\n              View all\n            </Button>\n          </div>\n          <div className=\"grid gap-3\">\n            {transactions.map((item) => (\n              <div\n                key={item.name}\n                className=\"flex min-h-[64px] items-center gap-3 rounded-lg border bg-card px-3\"\n              >\n                <div className={`grid size-10 place-items-center rounded-lg ${item.tone}`}>\n                  <CreditCard className=\"size-4\" />\n                </div>\n                <span className=\"flex-1 text-sm font-medium\">{item.name}</span>\n                <span className=\"text-sm font-semibold\">{item.amount}</span>\n              </div>\n            ))}\n          </div>\n        </div>\n      </main>\n    </section>\n  )\n}\n","type":"registry:block","target":"components/blocks/mobile-finance/wallet-home-01.tsx"}],"categories":["mobile-finance"],"registryDependencies":["badge","button","card","progress"],"meta":{"frameworks":["react"],"category":"mobile-finance","tags":["mobile","mobile-finance"],"clientOnly":false,"viewport":"mobile-first","previewPath":"registry/default/blocks/mobile-finance/wallet-home-01.tsx","isActive":true,"mdxBody":"```tsx\nimport { ArrowDownLeft, ArrowUpRight, CreditCard, ShieldCheck, Wallet } from 'lucide-react'\n\nimport { Badge } from '@/components/ui/badge'\nimport { Button } from '@/components/ui/button'\nimport { Card, CardContent } from '@/components/ui/card'\nimport { Progress } from '@/components/ui/progress'\n\nconst actions = [\n  { label: 'Send', icon: ArrowUpRight },\n  { label: 'Receive', icon: ArrowDownLeft },\n  { label: 'Cards', icon: CreditCard },\n]\n\nconst transactions = [\n  {\n    name: 'Figma',\n    amount: '-$24.00',\n    tone: 'bg-violet-100 text-violet-900 dark:bg-violet-400/15 dark:text-violet-200',\n  },\n  {\n    name: 'Stripe payout',\n    amount: '+$890.20',\n    tone: 'bg-emerald-100 text-emerald-900 dark:bg-emerald-400/15 dark:text-emerald-200',\n  },\n  {\n    name: 'Vercel',\n    amount: '-$20.00',\n    tone: 'bg-slate-100 text-slate-900 dark:bg-slate-400/15 dark:text-slate-200',\n  },\n]\n\nexport default function WalletHome01() {\n  return (\n    <section className=\"mx-auto flex min-h-dvh w-full max-w-md flex-col bg-background text-foreground\">\n      <header className=\"px-5 pb-4 pt-safe-top\">\n        <div className=\"flex items-center justify-between\">\n          <div>\n            <p className=\"text-xs font-medium text-muted-foreground\">Total balance</p>\n            <h1 className=\"mt-1 text-3xl font-semibold tracking-normal\">$24,892.48</h1>\n          </div>\n          <Button\n            aria-label=\"Security center\"\n            className=\"size-11 rounded-lg\"\n            size=\"icon\"\n            variant=\"outline\"\n          >\n            <ShieldCheck className=\"size-5\" />\n          </Button>\n        </div>\n      </header>\n\n      <main className=\"flex flex-1 flex-col gap-5 px-5 pb-safe-bottom\">\n        <div className=\"rounded-lg bg-foreground p-5 text-background shadow-sm\">\n          <div className=\"flex items-center justify-between\">\n            <Badge className=\"rounded-md bg-background/15 text-background hover:bg-background/20\">\n              Timkit Card\n            </Badge>\n            <Wallet className=\"size-6 opacity-80\" />\n          </div>\n          <div className=\"mt-12 flex items-end justify-between\">\n            <div>\n              <p className=\"text-xs text-background/60\">Monthly spend</p>\n              <p className=\"mt-1 text-xl font-semibold\">$3,240.18</p>\n            </div>\n            <p className=\"text-sm text-background/70\">**** 0924</p>\n          </div>\n        </div>\n\n        <div className=\"grid grid-cols-3 gap-3\">\n          {actions.map((action) => {\n            const Icon = action.icon\n            return (\n              <Button key={action.label} className=\"min-h-[56px] rounded-lg\" variant=\"secondary\">\n                <Icon className=\"mr-2 size-4\" />\n                {action.label}\n              </Button>\n            )\n          })}\n        </div>\n\n        <Card className=\"rounded-lg\">\n          <CardContent className=\"p-4\">\n            <div className=\"flex items-center justify-between gap-4\">\n              <div>\n                <h2 className=\"text-sm font-semibold\">Agent budget guard</h2>\n                <p className=\"mt-1 text-xs text-muted-foreground\">$1,840 left this month</p>\n              </div>\n              <span className=\"text-sm font-semibold\">62%</span>\n            </div>\n            <Progress className=\"mt-4 h-2\" value={62} />\n          </CardContent>\n        </Card>\n\n        <div>\n          <div className=\"mb-3 flex items-center justify-between\">\n            <h2 className=\"text-sm font-semibold\">Recent activity</h2>\n            <Button className=\"h-11 rounded-lg px-3\" variant=\"ghost\">\n              View all\n            </Button>\n          </div>\n          <div className=\"grid gap-3\">\n            {transactions.map((item) => (\n              <div\n                key={item.name}\n                className=\"flex min-h-[64px] items-center gap-3 rounded-lg border bg-card px-3\"\n              >\n                <div className={`grid size-10 place-items-center rounded-lg ${item.tone}`}>\n                  <CreditCard className=\"size-4\" />\n                </div>\n                <span className=\"flex-1 text-sm font-medium\">{item.name}</span>\n                <span className=\"text-sm font-semibold\">{item.amount}</span>\n              </div>\n            ))}\n          </div>\n        </div>\n      </main>\n    </section>\n  )\n}\n\n```","title":"Wallet Home · $24,892.48"}}