{"name":"commerce-home-01","type":"registry:block","description":"Block: commerce-home-01","dependencies":["lucide-react"],"files":[{"path":"blocks/mobile-commerce/commerce-home-01.tsx","content":"import { ArrowRight, Heart, Search, ShoppingBag, Sparkles, Star } from 'lucide-react'\n\nimport { Badge } from '@/components/ui/badge'\nimport { Button } from '@/components/ui/button'\nimport { Card, CardContent } from '@/components/ui/card'\nimport { Input } from '@/components/ui/input'\n\nconst categories = ['Drops', 'Daily', 'Outdoor', 'Studio']\n\nconst products = [\n  {\n    name: 'Trace Knit Jacket',\n    detail: 'Water-repellent shell',\n    price: '$128',\n    rating: '4.9',\n    accent: 'bg-sky-100 text-sky-900 dark:bg-sky-400/15 dark:text-sky-200',\n  },\n  {\n    name: 'Arc Running Tote',\n    detail: '18L recycled nylon',\n    price: '$74',\n    rating: '4.8',\n    accent: 'bg-emerald-100 text-emerald-900 dark:bg-emerald-400/15 dark:text-emerald-200',\n  },\n]\n\nexport default function CommerceHome01() {\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=\"flex items-center justify-between px-5 pb-4 pt-safe-top\">\n        <div>\n          <p className=\"text-xs font-medium text-muted-foreground\">Good morning</p>\n          <h1 className=\"mt-1 text-2xl font-semibold tracking-normal\">Find your next fit</h1>\n        </div>\n        <Button aria-label=\"Open shopping bag\" className=\"size-11 rounded-lg\" size=\"icon\">\n          <ShoppingBag className=\"size-5\" />\n        </Button>\n      </header>\n\n      <main className=\"flex flex-1 flex-col gap-5 px-5 pb-safe-bottom\">\n        <label className=\"relative block\">\n          <span className=\"sr-only\">Search products</span>\n          <Search className=\"pointer-events-none absolute left-3 top-1/2 size-4 -translate-y-1/2 text-muted-foreground\" />\n          <Input\n            className=\"min-h-[44px] rounded-lg pl-10\"\n            placeholder=\"Search jackets, bags, shoes\"\n            type=\"search\"\n          />\n        </label>\n\n        <div className=\"flex gap-2 overflow-x-auto pb-1\">\n          {categories.map((category, index) => (\n            <Button\n              key={category}\n              className=\"min-h-[44px] shrink-0 rounded-lg px-4\"\n              variant={index === 0 ? 'default' : 'outline'}\n            >\n              {category}\n            </Button>\n          ))}\n        </div>\n\n        <div className=\"rounded-lg border bg-card p-4 shadow-sm\">\n          <div className=\"flex items-start justify-between gap-4\">\n            <div>\n              <Badge className=\"rounded-md\" variant=\"secondary\">\n                <Sparkles className=\"mr-1 size-3\" />\n                Agent pick\n              </Badge>\n              <h2 className=\"mt-4 max-w-[13rem] text-2xl font-semibold tracking-normal\">\n                Capsule pieces for a rainy city week.\n              </h2>\n            </div>\n            <div className=\"grid size-24 place-items-center rounded-lg bg-primary/10 text-primary\">\n              <ShoppingBag className=\"size-10\" />\n            </div>\n          </div>\n          <Button className=\"mt-5 min-h-[44px] rounded-lg\" variant=\"secondary\">\n            Build outfit\n            <ArrowRight className=\"ml-2 size-4\" />\n          </Button>\n        </div>\n\n        <div className=\"grid gap-3\">\n          {products.map((product) => (\n            <Card key={product.name} className=\"rounded-lg\">\n              <CardContent className=\"flex items-center gap-3 p-3\">\n                <div className={`grid size-16 place-items-center rounded-lg ${product.accent}`}>\n                  <ShoppingBag className=\"size-7\" />\n                </div>\n                <div className=\"min-w-0 flex-1\">\n                  <h3 className=\"truncate text-sm font-semibold\">{product.name}</h3>\n                  <p className=\"mt-1 truncate text-xs text-muted-foreground\">{product.detail}</p>\n                  <div className=\"mt-2 flex items-center gap-2 text-xs text-muted-foreground\">\n                    <Star className=\"size-3 fill-current\" />\n                    {product.rating}\n                  </div>\n                </div>\n                <div className=\"flex flex-col items-end gap-2\">\n                  <Button\n                    aria-label={`Save ${product.name}`}\n                    className=\"size-11 rounded-lg\"\n                    size=\"icon\"\n                    variant=\"ghost\"\n                  >\n                    <Heart className=\"size-4\" />\n                  </Button>\n                  <span className=\"text-sm font-semibold\">{product.price}</span>\n                </div>\n              </CardContent>\n            </Card>\n          ))}\n        </div>\n      </main>\n    </section>\n  )\n}\n","type":"registry:block","target":"components/blocks/mobile-commerce/commerce-home-01.tsx"}],"categories":["mobile-commerce"],"registryDependencies":["badge","button","card","input"],"meta":{"frameworks":["react"],"category":"mobile-commerce","tags":["mobile","mobile-commerce"],"clientOnly":false,"viewport":"mobile-first","previewPath":"registry/default/blocks/mobile-commerce/commerce-home-01.tsx","isActive":true,"mdxBody":"```tsx\nimport { ArrowRight, Heart, Search, ShoppingBag, Sparkles, Star } from 'lucide-react'\n\nimport { Badge } from '@/components/ui/badge'\nimport { Button } from '@/components/ui/button'\nimport { Card, CardContent } from '@/components/ui/card'\nimport { Input } from '@/components/ui/input'\n\nconst categories = ['Drops', 'Daily', 'Outdoor', 'Studio']\n\nconst products = [\n  {\n    name: 'Trace Knit Jacket',\n    detail: 'Water-repellent shell',\n    price: '$128',\n    rating: '4.9',\n    accent: 'bg-sky-100 text-sky-900 dark:bg-sky-400/15 dark:text-sky-200',\n  },\n  {\n    name: 'Arc Running Tote',\n    detail: '18L recycled nylon',\n    price: '$74',\n    rating: '4.8',\n    accent: 'bg-emerald-100 text-emerald-900 dark:bg-emerald-400/15 dark:text-emerald-200',\n  },\n]\n\nexport default function CommerceHome01() {\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=\"flex items-center justify-between px-5 pb-4 pt-safe-top\">\n        <div>\n          <p className=\"text-xs font-medium text-muted-foreground\">Good morning</p>\n          <h1 className=\"mt-1 text-2xl font-semibold tracking-normal\">Find your next fit</h1>\n        </div>\n        <Button aria-label=\"Open shopping bag\" className=\"size-11 rounded-lg\" size=\"icon\">\n          <ShoppingBag className=\"size-5\" />\n        </Button>\n      </header>\n\n      <main className=\"flex flex-1 flex-col gap-5 px-5 pb-safe-bottom\">\n        <label className=\"relative block\">\n          <span className=\"sr-only\">Search products</span>\n          <Search className=\"pointer-events-none absolute left-3 top-1/2 size-4 -translate-y-1/2 text-muted-foreground\" />\n          <Input\n            className=\"min-h-[44px] rounded-lg pl-10\"\n            placeholder=\"Search jackets, bags, shoes\"\n            type=\"search\"\n          />\n        </label>\n\n        <div className=\"flex gap-2 overflow-x-auto pb-1\">\n          {categories.map((category, index) => (\n            <Button\n              key={category}\n              className=\"min-h-[44px] shrink-0 rounded-lg px-4\"\n              variant={index === 0 ? 'default' : 'outline'}\n            >\n              {category}\n            </Button>\n          ))}\n        </div>\n\n        <div className=\"rounded-lg border bg-card p-4 shadow-sm\">\n          <div className=\"flex items-start justify-between gap-4\">\n            <div>\n              <Badge className=\"rounded-md\" variant=\"secondary\">\n                <Sparkles className=\"mr-1 size-3\" />\n                Agent pick\n              </Badge>\n              <h2 className=\"mt-4 max-w-[13rem] text-2xl font-semibold tracking-normal\">\n                Capsule pieces for a rainy city week.\n              </h2>\n            </div>\n            <div className=\"grid size-24 place-items-center rounded-lg bg-primary/10 text-primary\">\n              <ShoppingBag className=\"size-10\" />\n            </div>\n          </div>\n          <Button className=\"mt-5 min-h-[44px] rounded-lg\" variant=\"secondary\">\n            Build outfit\n            <ArrowRight className=\"ml-2 size-4\" />\n          </Button>\n        </div>\n\n        <div className=\"grid gap-3\">\n          {products.map((product) => (\n            <Card key={product.name} className=\"rounded-lg\">\n              <CardContent className=\"flex items-center gap-3 p-3\">\n                <div className={`grid size-16 place-items-center rounded-lg ${product.accent}`}>\n                  <ShoppingBag className=\"size-7\" />\n                </div>\n                <div className=\"min-w-0 flex-1\">\n                  <h3 className=\"truncate text-sm font-semibold\">{product.name}</h3>\n                  <p className=\"mt-1 truncate text-xs text-muted-foreground\">{product.detail}</p>\n                  <div className=\"mt-2 flex items-center gap-2 text-xs text-muted-foreground\">\n                    <Star className=\"size-3 fill-current\" />\n                    {product.rating}\n                  </div>\n                </div>\n                <div className=\"flex flex-col items-end gap-2\">\n                  <Button\n                    aria-label={`Save ${product.name}`}\n                    className=\"size-11 rounded-lg\"\n                    size=\"icon\"\n                    variant=\"ghost\"\n                  >\n                    <Heart className=\"size-4\" />\n                  </Button>\n                  <span className=\"text-sm font-semibold\">{product.price}</span>\n                </div>\n              </CardContent>\n            </Card>\n          ))}\n        </div>\n      </main>\n    </section>\n  )\n}\n\n```","title":"Commerce Home · Find your next fit"}}