{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "table12",
  "title": "Table",
  "description": "Table built with shadcn/ui.",
  "files": [
    {
      "path": "contents/components/table/12/index.tsx",
      "content": "\"use client\";\n\nimport { useState } from \"react\";\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 { Checkbox } from \"@/components/ui/checkbox\";\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: {\n      name: \"Mike Johnson\",\n      avatar: \"https://i.pravatar.cc/150?img=3\",\n    },\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: {\n      name: \"Sarah Wilson\",\n      avatar: \"https://i.pravatar.cc/150?img=4\",\n    },\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: {\n      name: \"David Brown\",\n      avatar: \"https://i.pravatar.cc/150?img=5\",\n    },\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: {\n      name: \"Emily Davis\",\n      avatar: \"https://i.pravatar.cc/150?img=6\",\n    },\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 [selectedRows, setSelectedRows] = useState<Set<string>>(new Set());\n\n  const isAllSelected =\n    selectedRows.size === payments.length && payments.length > 0;\n  const isIndeterminate =\n    selectedRows.size > 0 && selectedRows.size < payments.length;\n  const selectAllChecked = isIndeterminate ? \"indeterminate\" : isAllSelected;\n\n  const toggleRow = (id: string) => {\n    setSelectedRows((prev) => {\n      const next = new Set(prev);\n      if (next.has(id)) {\n        next.delete(id);\n      } else {\n        next.add(id);\n      }\n      return next;\n    });\n  };\n\n  const toggleAll = () => {\n    if (isAllSelected) {\n      setSelectedRows(new Set());\n    } else {\n      setSelectedRows(new Set(payments.map((p) => p.id)));\n    }\n  };\n\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 space-y-4\">\n      <Table>\n        <TableHeader>\n          <TableRow>\n            <TableHead className=\"w-12\">\n              <Checkbox\n                checked={selectAllChecked}\n                onCheckedChange={toggleAll}\n                aria-label=\"Select all\"\n              />\n            </TableHead>\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          </TableRow>\n        </TableHeader>\n        <TableBody>\n          {payments.map((payment) => (\n            <TableRow\n              key={payment.id}\n              data-selected={selectedRows.has(payment.id)}\n              className=\"data-[selected=true]:bg-muted\"\n            >\n              <TableCell>\n                <Checkbox\n                  checked={selectedRows.has(payment.id)}\n                  onCheckedChange={() => toggleRow(payment.id)}\n                  aria-label={`Select ${payment.id}`}\n                />\n              </TableCell>\n              <TableCell className=\"font-mono text-sm\">{payment.id}</TableCell>\n              <TableCell>\n                <div className=\"flex items-center gap-2\">\n                  <Avatar>\n                    <AvatarImage\n                      src={payment.customer.avatar}\n                      alt={payment.customer.name}\n                    />\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)}>\n                  {payment.status}\n                </Badge>\n              </TableCell>\n              <TableCell className=\"text-muted-foreground\">\n                {formatDate(payment.date)}\n              </TableCell>\n            </TableRow>\n          ))}\n        </TableBody>\n      </Table>\n    </div>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/table12.tsx"
    }
  ],
  "type": "registry:component"
}