{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "table10",
  "title": "Table",
  "description": "Table built with shadcn/ui.",
  "files": [
    {
      "path": "contents/components/table/10/index.tsx",
      "content": "\"use client\";\n\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow\n} from \"@/components/ui/table\";\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\";\nimport { Badge } from \"@/components/ui/badge\";\nimport { ScrollArea } from \"@/components/ui/scroll-area\";\n\nconst payments = [\n  {\n    id: \"PAY-001\",\n    customer: { name: \"John Doe\", avatar: \"https://i.pravatar.cc/150?img=1\" },\n    product: \"Premium Plan\",\n    price: \"$99.00\",\n    paymentType: \"Credit Card\",\n    status: \"Completed\",\n    date: \"2024-01-15\"\n  },\n  {\n    id: \"PAY-002\",\n    customer: { name: \"Jane Smith\", avatar: \"https://i.pravatar.cc/150?img=2\" },\n    product: \"Basic Plan\",\n    price: \"$29.00\",\n    paymentType: \"PayPal\",\n    status: \"Completed\",\n    date: \"2024-01-16\"\n  },\n  {\n    id: \"PAY-003\",\n    customer: { name: \"Mike Johnson\", avatar: \"https://i.pravatar.cc/150?img=3\" },\n    product: \"Enterprise Plan\",\n    price: \"$299.00\",\n    paymentType: \"Bank Transfer\",\n    status: \"Pending\",\n    date: \"2024-01-22\"\n  },\n  {\n    id: \"PAY-004\",\n    customer: { name: \"Sarah Wilson\", avatar: \"https://i.pravatar.cc/150?img=4\" },\n    product: \"Premium Plan\",\n    price: \"$99.00\",\n    paymentType: \"Stripe\",\n    status: \"Completed\",\n    date: \"2024-01-18\"\n  },\n  {\n    id: \"PAY-005\",\n    customer: { name: \"David Brown\", avatar: \"https://i.pravatar.cc/150?img=5\" },\n    product: \"Basic Plan\",\n    price: \"$29.00\",\n    paymentType: \"Credit Card\",\n    status: \"Failed\",\n    date: \"2024-01-19\"\n  },\n  {\n    id: \"PAY-006\",\n    customer: { name: \"Emily Davis\", avatar: \"https://i.pravatar.cc/150?img=6\" },\n    product: \"Premium Plan\",\n    price: \"$99.00\",\n    paymentType: \"PayPal\",\n    status: \"Completed\",\n    date: \"2024-01-20\"\n  },\n  {\n    id: \"PAY-007\",\n    customer: { name: \"Robert Taylor\", avatar: \"https://i.pravatar.cc/150?img=7\" },\n    product: \"Enterprise Plan\",\n    price: \"$299.00\",\n    paymentType: \"Credit Card\",\n    status: \"Completed\",\n    date: \"2024-01-21\"\n  },\n  {\n    id: \"PAY-008\",\n    customer: { name: \"Lisa Anderson\", avatar: \"https://i.pravatar.cc/150?img=8\" },\n    product: \"Basic Plan\",\n    price: \"$29.00\",\n    paymentType: \"Stripe\",\n    status: \"Pending\",\n    date: \"2024-01-22\"\n  },\n  {\n    id: \"PAY-009\",\n    customer: { name: \"James Martinez\", avatar: \"https://i.pravatar.cc/150?img=9\" },\n    product: \"Premium Plan\",\n    price: \"$99.00\",\n    paymentType: \"Bank Transfer\",\n    status: \"Failed\",\n    date: \"2024-01-22\"\n  }\n];\n\nexport type Payment = (typeof payments)[number];\n\nexport default function TableComponent() {\n  const getStatusVariant = (status: Payment[\"status\"]) => {\n    switch (status) {\n      case \"Completed\":\n        return \"default\";\n      case \"Pending\":\n        return \"secondary\";\n      case \"Failed\":\n        return \"destructive\";\n      default:\n        return \"outline\";\n    }\n  };\n\n  const formatDate = (dateString: string) => {\n    const date = new Date(dateString);\n    return date.toLocaleDateString(\"en-US\", {\n      year: \"numeric\",\n      month: \"short\",\n      day: \"numeric\"\n    });\n  };\n\n  return (\n    <div className=\"w-full max-w-6xl\">\n      <ScrollArea className=\"h-80\">\n        <Table>\n          <TableHeader>\n            <TableRow>\n              <TableHead className=\"bg-muted\">ID</TableHead>\n              <TableHead className=\"bg-muted\">Customer</TableHead>\n              <TableHead className=\"bg-muted\">Product</TableHead>\n              <TableHead className=\"bg-muted\">Price</TableHead>\n              <TableHead className=\"bg-muted\">Payment Type</TableHead>\n              <TableHead className=\"bg-muted\">Status</TableHead>\n              <TableHead className=\"bg-muted\">Date</TableHead>\n            </TableRow>\n          </TableHeader>\n          <TableBody>\n            {payments.map((payment) => (\n              <TableRow key={payment.id} className=\"hover:bg-transparent\">\n                <TableCell className=\"font-mono text-sm\">{payment.id}</TableCell>\n                <TableCell>\n                  <div className=\"flex items-center gap-2\">\n                    <Avatar>\n                      <AvatarImage src={payment.customer.avatar} alt={payment.customer.name} />\n                      <AvatarFallback>\n                        {payment.customer.name\n                          .split(\" \")\n                          .map((n) => n[0])\n                          .join(\"\")}\n                      </AvatarFallback>\n                    </Avatar>\n                    <span>{payment.customer.name}</span>\n                  </div>\n                </TableCell>\n                <TableCell>{payment.product}</TableCell>\n                <TableCell className=\"font-medium\">{payment.price}</TableCell>\n                <TableCell>{payment.paymentType}</TableCell>\n                <TableCell>\n                  <Badge variant={getStatusVariant(payment.status)}>{payment.status}</Badge>\n                </TableCell>\n                <TableCell className=\"text-muted-foreground\">\n                  {payment.date ? formatDate(payment.date) : \"-\"}\n                </TableCell>\n              </TableRow>\n            ))}\n          </TableBody>\n        </Table>\n      </ScrollArea>\n    </div>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/table10.tsx"
    }
  ],
  "type": "registry:component"
}