{"name":"mobile-wallet","type":"registry:page","description":"Mobile template: mobile-wallet","dependencies":["lucide-react"],"files":[{"path":"templates/mobile-app/mobile-wallet.tsx","content":"import {\n  ArrowDownLeft,\n  ArrowUpRight,\n  CreditCard,\n  Home,\n  PieChart,\n  ShieldCheck,\n  UserRound,\n} from 'lucide-react'\n\nimport { Badge } from '@/components/ui/badge'\nimport { Button } from '@/components/ui/button'\nimport { Progress } from '@/components/ui/progress'\n\nconst rows = [\n  { label: 'Cloud tools', value: '-$44.00' },\n  { label: 'Client payment', value: '+$1,280.00' },\n  { label: 'Team lunch', value: '-$86.40' },\n]\n\nexport default function MobileWalletPage() {\n  return (\n    <main 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\">Available balance</p>\n            <h1 className=\"mt-1 text-3xl font-semibold tracking-normal\">$18,420.90</h1>\n          </div>\n          <Button\n            aria-label=\"Security\"\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      <section className=\"flex flex-1 flex-col gap-5 px-5 pb-24\">\n        <div className=\"rounded-lg bg-foreground p-5 text-background\">\n          <Badge className=\"rounded-md bg-background/15 text-background hover:bg-background/20\">\n            Primary card\n          </Badge>\n          <div className=\"mt-16 flex items-end justify-between\">\n            <p className=\"text-xl font-semibold\">**** 4820</p>\n            <CreditCard className=\"size-6 opacity-80\" />\n          </div>\n        </div>\n\n        <div className=\"grid grid-cols-2 gap-3\">\n          <Button className=\"min-h-[52px] rounded-lg\">\n            <ArrowUpRight className=\"mr-2 size-4\" />\n            Send\n          </Button>\n          <Button className=\"min-h-[52px] rounded-lg\" variant=\"secondary\">\n            <ArrowDownLeft className=\"mr-2 size-4\" />\n            Request\n          </Button>\n        </div>\n\n        <div className=\"rounded-lg border bg-card p-4\">\n          <div className=\"flex items-center justify-between\">\n            <h2 className=\"text-sm font-semibold\">Spend limit</h2>\n            <span className=\"text-sm font-semibold\">58%</span>\n          </div>\n          <Progress className=\"mt-4 h-2\" value={58} />\n        </div>\n\n        <div className=\"grid gap-3\">\n          {rows.map((row) => (\n            <div\n              key={row.label}\n              className=\"flex min-h-[60px] items-center justify-between rounded-lg border bg-card px-4\"\n            >\n              <span className=\"text-sm font-medium\">{row.label}</span>\n              <span className=\"text-sm font-semibold\">{row.value}</span>\n            </div>\n          ))}\n        </div>\n      </section>\n\n      <nav className=\"fixed inset-x-0 bottom-0 mx-auto flex max-w-md justify-around border-t bg-background/95 px-5 py-3 pb-safe-bottom backdrop-blur\">\n        {[Home, PieChart, CreditCard, UserRound].map((Icon, index) => (\n          <Button\n            key={index}\n            aria-label={`Tab ${index + 1}`}\n            className=\"size-11 rounded-lg\"\n            size=\"icon\"\n            variant={index === 0 ? 'secondary' : 'ghost'}\n          >\n            <Icon className=\"size-5\" />\n          </Button>\n        ))}\n      </nav>\n    </main>\n  )\n}\n","type":"registry:page","target":"app/mobile-wallet/page.tsx"}],"categories":["mobile-app"],"registryDependencies":["badge","button","progress"],"meta":{"frameworks":["react"],"category":"mobile-app","tags":["mobile","template","mobile-app"],"clientOnly":false,"viewport":"mobile-first","source":"packages/react/src/templates","previewPath":"registry/default/templates/mobile-app/mobile-wallet.tsx"}}