{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "table6",
  "title": "Table",
  "description": "Table built with shadcn/ui.",
  "files": [
    {
      "path": "contents/components/table/6/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 { Button } from \"@/components/ui/button\";\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger\n} from \"@/components/ui/dropdown-menu\";\nimport { Eye, Edit, RotateCcw, Trash2, MoreHorizontal } from \"lucide-react\";\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-17\"\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\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      <Table>\n        <TableHeader>\n          <TableRow className=\"bg-muted border-b-0! *:first:rounded-tl-lg *:first:rounded-bl-lg *:last:rounded-tr-lg *:last:rounded-br-lg\">\n            <TableHead>ID</TableHead>\n            <TableHead>Customer</TableHead>\n            <TableHead>Product</TableHead>\n            <TableHead>Price</TableHead>\n            <TableHead>Payment Type</TableHead>\n            <TableHead>Status</TableHead>\n            <TableHead>Date</TableHead>\n            <TableHead className=\"text-right\">Actions</TableHead>\n          </TableRow>\n        </TableHeader>\n        <TableBody className=\"*:border-b-0\">\n          {payments.map((payment) => (\n            <TableRow key={payment.id}>\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\">{formatDate(payment.date)}</TableCell>\n              <TableCell className=\"text-right\">\n                <DropdownMenu>\n                  <DropdownMenuTrigger asChild>\n                    <Button variant=\"ghost\" size=\"icon\">\n                      <MoreHorizontal />\n                    </Button>\n                  </DropdownMenuTrigger>\n                  <DropdownMenuContent align=\"end\">\n                    <DropdownMenuItem>\n                      <Eye />\n                      View details\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <Edit />\n                      Edit\n                    </DropdownMenuItem>\n                    {payment.status === \"Completed\" && (\n                      <DropdownMenuItem>\n                        <RotateCcw />\n                        Refund\n                      </DropdownMenuItem>\n                    )}\n                    {payment.status === \"Failed\" && (\n                      <DropdownMenuItem>\n                        <RotateCcw />\n                        Retry payment\n                      </DropdownMenuItem>\n                    )}\n                    <DropdownMenuSeparator />\n                    <DropdownMenuItem variant=\"destructive\">\n                      <Trash2 />\n                      Delete\n                    </DropdownMenuItem>\n                  </DropdownMenuContent>\n                </DropdownMenu>\n              </TableCell>\n            </TableRow>\n          ))}\n        </TableBody>\n      </Table>\n    </div>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/table6.tsx"
    }
  ],
  "type": "registry:component"
}