/apps/www/public/r/web3-03.json

{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "web3-03",
  "description": "Top crypto auctions with countdown timer",
  "registryDependencies": [
    "avatar",
    "badge",
    "button",
    "card",
    "select"
  ],
  "files": [
    {
      "path": "creative-tim/blocks/web3-03/page.tsx",
      "content": "\"use client\"\n\nimport { Grid3x3, Menu } from \"lucide-react\"\n\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport { Card, CardContent, CardHeader } from \"@/components/ui/card\"\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/components/ui/select\"\n\nconst DATA = [\n  {\n    img: \"https://v3.material-tailwind.com/nft-1.svg\",\n    name: \"@thedreamytrees\",\n    desc: \"Owner\",\n    profileImg: \"https://images.unsplash.com/photo-1623853434105-8e7a72898180?auto=format&fit=crop&q=80&w=400&h=400\",\n    price: \"1,3 BTC\",\n    time: \"23h:03m:33s\",\n  },\n  {\n    img: \"https://v3.material-tailwind.com/nft-2.svg\",\n    name: \"@lindemichael\",\n    desc: \"Creator\",\n    profileImg: \"https://images.unsplash.com/photo-1716662318479-a9c0f1cd1a0e?auto=format&fit=crop&q=80&w=400&h=400\",\n    price: \"0,4 BTC\",\n    time: \"23h:03m:33s\",\n  },\n  {\n    img: \"https://v3.material-tailwind.com/nft-3.svg\",\n    name: \"@mishastam\",\n    desc: \"Owner\",\n    profileImg: \"https://v3.material-tailwind.com/man-profile-2.jpg\",\n    price: \"0,3 BTC\",\n    time: \"23h:03m:33s\",\n  },\n]\n\nexport default function Web303() {\n  return (\n    <section className=\"container mx-auto py-16\">\n      <Card className=\"border shadow-sm\">\n        <CardHeader className=\"flex flex-row flex-wrap items-start justify-between gap-6 p-6\">\n          <div>\n            <h1 className=\"mb-1 text-2xl font-bold\">Top Auctions</h1>\n            <p className=\"text-muted-foreground max-w-2xl text-lg\">\n              The most sought-after collections across the entire ecosystem.\n            </p>\n          </div>\n          <div className=\"flex flex-wrap items-center gap-2\">\n            <Select defaultValue=\"Last 24H\">\n              <SelectTrigger className=\"w-max\">\n                <SelectValue placeholder=\"Select Date\" />\n              </SelectTrigger>\n              <SelectContent>\n                <SelectItem value=\"Last 6H\">Last 6H</SelectItem>\n                <SelectItem value=\"Last 12H\">Last 12H</SelectItem>\n                <SelectItem value=\"Last 24H\">Last 24H</SelectItem>\n              </SelectContent>\n            </Select>\n            <Select defaultValue=\"Category 1\">\n              <SelectTrigger className=\"w-max\">\n                <SelectValue placeholder=\"Category\" />\n              </SelectTrigger>\n              <SelectContent>\n                <SelectItem value=\"Category 1\">Category 1</SelectItem>\n                <SelectItem value=\"Category 2\">Category 2</SelectItem>\n                <SelectItem value=\"Category 3\">Category 3</SelectItem>\n              </SelectContent>\n            </Select>\n            <Button variant=\"outline\" size=\"icon\">\n              <Menu className=\"h-4 w-4\" />\n            </Button>\n            <Button variant=\"outline\" size=\"icon\">\n              <Grid3x3 className=\"h-4 w-4\" />\n            </Button>\n          </div>\n        </CardHeader>\n        <CardContent className=\"grid grid-cols-1 gap-6 px-6 pt-0 pb-6 md:grid-cols-2 lg:grid-cols-3\">\n          {DATA.map(({ img, name, desc, profileImg, price, time }, key) => (\n            <Card key={key} className=\"overflow-hidden py-0\">\n              <CardHeader className=\"relative p-0\">\n                <img\n                  src={img}\n                  alt={name}\n                  className=\"h-80 w-full object-cover object-center\"\n                />\n                <Badge\n                  variant=\"secondary\"\n                  className=\"absolute bottom-4 left-4 flex items-center gap-2 border-white/50 bg-white/70 backdrop-blur\"\n                >\n                  <Avatar className=\"h-7 w-7\">\n                    <AvatarImage src={profileImg} alt={name} />\n                    <AvatarFallback>{name[1]}</AvatarFallback>\n                  </Avatar>\n                  <div className=\"flex flex-col\">\n                    <span className=\"text-xs font-semibold text-black\">\n                      {name}\n                    </span>\n                    <span className=\"text-muted-foreground text-xs\">\n                      {desc}\n                    </span>\n                  </div>\n                </Badge>\n              </CardHeader>\n              <CardContent className=\"px-4 pb-4\">\n                <div className=\"flex items-center justify-between\">\n                  <div>\n                    <p className=\"text-muted-foreground text-sm\">Current bid</p>\n                    <p className=\"text-lg font-bold\">{price}</p>\n                  </div>\n                  <div>\n                    <p className=\"text-muted-foreground text-sm\">\n                      Auction ends in\n                    </p>\n                    <p className=\"text-sm font-semibold\">{time}</p>\n                  </div>\n                </div>\n              </CardContent>\n            </Card>\n          ))}\n        </CardContent>\n      </Card>\n    </section>\n  )\n}\n",
      "type": "registry:page",
      "target": "app/web3-03/page.tsx"
    }
  ],
  "meta": {
    "iframeHeight": "1100px",
    "container": "w-full bg-surface min-h-svh flex px-4 py-12 items-center md:py-20 justify-center min-w-0",
    "mobile": "component"
  },
  "categories": [
    "web3"
  ],
  "type": "registry:block"
}