{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"c-table-7","type":"registry:block","title":"Orders table with customer info and payment status","description":"Orders table with customer info and payment status","dependencies":[],"registryDependencies":["avatar","@reui/badge","table"],"files":[{"path":"c-table-7.tsx","type":"registry:block","content":"import { Badge } from \"@/components/reui/badge\"\n\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@/components/ui/table\"\n\nconst orders = [\n  {\n    id: \"#3210\",\n    customer: \"Olivia Martin\",\n    email: \"olivia@example.com\",\n    avatar:\n      \"https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=96&h=96&dpr=2&q=80\",\n    amount: \"$1,999.00\",\n    status: \"Paid\",\n    statusVariant: \"success\" as const,\n    date: \"Feb 1, 2025\",\n  },\n  {\n    id: \"#3209\",\n    customer: \"Jackson Lee\",\n    email: \"jackson@example.com\",\n    avatar:\n      \"https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?w=96&h=96&dpr=2&q=80\",\n    amount: \"$39.00\",\n    status: \"Pending\",\n    statusVariant: \"warning\" as const,\n    date: \"Jan 28, 2025\",\n  },\n  {\n    id: \"#3208\",\n    customer: \"Isabella Nguyen\",\n    email: \"isabella@example.com\",\n    avatar:\n      \"https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=96&h=96&dpr=2&q=80\",\n    amount: \"$299.00\",\n    status: \"Paid\",\n    statusVariant: \"success\" as const,\n    date: \"Jan 25, 2025\",\n  },\n  {\n    id: \"#3207\",\n    customer: \"William Kim\",\n    email: \"will@example.com\",\n    avatar:\n      \"https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=96&h=96&dpr=2&q=80\",\n    amount: \"$99.00\",\n    status: \"Refunded\",\n    statusVariant: \"destructive-light\" as const,\n    date: \"Jan 22, 2025\",\n  },\n  {\n    id: \"#3206\",\n    customer: \"Sofia Davis\",\n    email: \"sofia@example.com\",\n    avatar:\n      \"https://images.unsplash.com/photo-1519699047748-de8e457a634e?w=96&h=96&dpr=2&q=80\",\n    amount: \"$2,500.00\",\n    status: \"Paid\",\n    statusVariant: \"success\" as const,\n    date: \"Jan 18, 2025\",\n  },\n]\n\nexport function Pattern() {\n  return (\n    <div className=\"mx-auto flex w-full max-w-2xl flex-col\">\n      <Table>\n        <TableHeader>\n          <TableRow>\n            <TableHead>Order</TableHead>\n            <TableHead>Customer</TableHead>\n            <TableHead>Status</TableHead>\n            <TableHead className=\"text-right\">Amount</TableHead>\n          </TableRow>\n        </TableHeader>\n        <TableBody>\n          {orders.map((order) => (\n            <TableRow key={order.id}>\n              <TableCell className=\"font-mono text-sm\">{order.id}</TableCell>\n              <TableCell>\n                <div className=\"flex items-center gap-3\">\n                  <Avatar size=\"sm\">\n                    <AvatarImage src={order.avatar} alt={order.customer} />\n                    <AvatarFallback>\n                      {order.customer\n                        .split(\" \")\n                        .map((n) => n[0])\n                        .join(\"\")}\n                    </AvatarFallback>\n                  </Avatar>\n                  <div className=\"flex flex-col\">\n                    <span className=\"text-sm font-medium\">\n                      {order.customer}\n                    </span>\n                    <span className=\"text-muted-foreground text-xs\">\n                      {order.date}\n                    </span>\n                  </div>\n                </div>\n              </TableCell>\n              <TableCell>\n                <Badge variant={order.statusVariant} size=\"sm\">\n                  {order.status}\n                </Badge>\n              </TableCell>\n              <TableCell className=\"text-right text-sm font-medium\">\n                {order.amount}\n              </TableCell>\n            </TableRow>\n          ))}\n        </TableBody>\n      </Table>\n    </div>\n  )\n}","target":"components/examples/c-table-7.tsx"}],"meta":{"order":7,"gridSize":1,"label":"Orders"}}