wehub-resource-sync
28 lines
4.8 KiB
JSON
28 lines
4.8 KiB
JSON
{
|
|
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
|
|
"name": "payment-method-01",
|
|
"description": "Payment method management with edit and delete",
|
|
"registryDependencies": [
|
|
"button",
|
|
"card",
|
|
"tooltip"
|
|
],
|
|
"files": [
|
|
{
|
|
"path": "creative-tim/blocks/payment-method-01/page.tsx",
|
|
"content": "\"use client\"\n\nimport { Check, Pencil, Plus, Trash2 } from \"lucide-react\"\n\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport { Card } from \"@/components/ui/card\"\nimport {\n Tooltip,\n TooltipContent,\n TooltipProvider,\n TooltipTrigger,\n} from \"@/components/ui/tooltip\"\n\ninterface PaymentMethodProps {\n type: \"visa\" | \"mastercard\"\n number: string\n isDefault?: boolean\n}\n\nfunction PaymentMethod({ type, number, isDefault }: PaymentMethodProps) {\n const cardImg =\n type === \"visa\"\n ? \"https://v3.material-tailwind.com/visa.webp\"\n : \"https://v3.material-tailwind.com/mastercard.webp\"\n\n return (\n <Card className=\"group hover:border-primary/50 relative flex flex-col gap-4 border p-6 transition-all hover:shadow-md\">\n {isDefault && (\n <div className=\"bg-primary absolute -top-px -right-px rounded-tr-lg rounded-bl-lg px-3 py-1\">\n <div className=\"flex items-center gap-1.5 text-xs font-semibold text-white\">\n <Check className=\"h-3 w-3\" />\n Default\n </div>\n </div>\n )}\n\n <div className=\"flex items-center gap-3\">\n <div className=\"flex h-12 w-16 items-center justify-center rounded-lg bg-gray-50 p-2\">\n <img\n src={cardImg}\n alt={type}\n className=\"h-full w-auto object-contain\"\n />\n </div>\n\n <div className=\"flex flex-1 flex-col gap-1\">\n <p className=\"text-base font-bold tracking-wider\">\n **** **** **** {number}\n </p>\n <p className=\"text-muted-foreground text-sm capitalize\">\n {type} Card\n </p>\n </div>\n </div>\n\n <div className=\"flex items-center gap-1\">\n <TooltipProvider>\n <Tooltip>\n <TooltipTrigger asChild>\n <Button size=\"icon\" variant=\"ghost\" className=\"h-9 w-9\">\n <Pencil className=\"h-4 w-4\" />\n </Button>\n </TooltipTrigger>\n <TooltipContent>\n <p>Edit Card</p>\n </TooltipContent>\n </Tooltip>\n </TooltipProvider>\n\n <TooltipProvider>\n <Tooltip>\n <TooltipTrigger asChild>\n <Button\n size=\"icon\"\n variant=\"ghost\"\n className=\"text-destructive hover:bg-destructive/10 hover:text-destructive h-9 w-9\"\n >\n <Trash2 className=\"h-4 w-4\" />\n </Button>\n </TooltipTrigger>\n <TooltipContent>\n <p>Remove Card</p>\n </TooltipContent>\n </Tooltip>\n </TooltipProvider>\n </div>\n </Card>\n )\n}\n\nexport default function PaymentMethod01() {\n return (\n <div className=\"mx-auto max-w-4xl p-6\">\n <div className=\"flex flex-col items-start justify-between gap-4 sm:flex-row sm:items-center\">\n <div>\n <h2 className=\"text-2xl font-bold\">Payment Methods</h2>\n <p className=\"text-muted-foreground mt-1 text-sm\">\n Manage your preferred payment methods securely and conveniently.\n </p>\n </div>\n <Button className=\"w-full sm:w-auto\">\n <Plus className=\"mr-2 h-4 w-4\" /> Add New Card\n </Button>\n </div>\n\n <div className=\"mt-8 grid grid-cols-1 gap-4 md:grid-cols-2\">\n <PaymentMethod type=\"mastercard\" number=\"7852\" isDefault />\n <PaymentMethod type=\"visa\" number=\"9831\" />\n <PaymentMethod type=\"visa\" number=\"8362\" />\n <PaymentMethod type=\"mastercard\" number=\"0098\" />\n </div>\n </div>\n )\n}\n",
|
|
"type": "registry:page",
|
|
"target": "app/payment-method/page.tsx"
|
|
}
|
|
],
|
|
"meta": {
|
|
"iframeHeight": "500px",
|
|
"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",
|
|
"details": "Manage payment methods with a straightforward UI layout featuring shadcn/ui Card, Button, and Tooltip components. Card brands are clearly identified, sensitive information is partially hidden for security, and editing/deleting functions are easily accessible. Includes a call-to-action button for adding new payment methods. Perfect for account settings, billing pages, and checkout flows."
|
|
},
|
|
"categories": [
|
|
"billing"
|
|
],
|
|
"type": "registry:block"
|
|
} |