98552163a8
Complete frontend implementation with: - Next.js 16 with App Router and TypeScript - Tailwind CSS v4 with custom violet theme - shadcn/ui components with Lucide React icons - Landing page with hero, services, pricing, testimonials, FAQ - Service selection page with toggle - Login/Register pages with social auth UI - Multi-step checkout flow - Client dashboard with stats, projects, support tickets - Billing page with subscription, payment methods, invoices - All mock data and TypeScript types 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
71 lines
2.4 KiB
TypeScript
71 lines
2.4 KiB
TypeScript
'use client'
|
|
import { CreditCard, Wallet, Edit, Trash2, Plus } from 'lucide-react'
|
|
|
|
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
|
|
import { Button } from '@/components/ui/button'
|
|
import { Badge } from '@/components/ui/badge'
|
|
import type { PaymentMethod } from '@/lib/types'
|
|
|
|
interface PaymentMethodListProps {
|
|
paymentMethods: PaymentMethod[]
|
|
}
|
|
|
|
export function PaymentMethodList({ paymentMethods }: PaymentMethodListProps) {
|
|
return (
|
|
<Card className="bg-card border-border">
|
|
<CardHeader>
|
|
<CardTitle>Payment Methods</CardTitle>
|
|
</CardHeader>
|
|
<CardContent className="flex flex-col gap-4">
|
|
{paymentMethods.map((method) => (
|
|
<div
|
|
key={method.id}
|
|
className="flex items-center justify-between p-4 rounded-xl bg-background border border-border"
|
|
>
|
|
<div className="flex items-center gap-4">
|
|
{/* Icon */}
|
|
<div className="p-3 bg-card border border-border rounded-lg">
|
|
{method.type === 'card' ? (
|
|
<CreditCard className="w-6 h-6 text-foreground" />
|
|
) : (
|
|
<Wallet className="w-6 h-6 text-foreground" />
|
|
)}
|
|
</div>
|
|
|
|
{/* Details */}
|
|
<div>
|
|
<div className="flex items-center gap-2">
|
|
<p className="font-semibold text-foreground">
|
|
{method.type === 'card'
|
|
? `${method.brand?.toUpperCase()} •••• ${method.last4}`
|
|
: `PayPal - ${method.email}`}
|
|
</p>
|
|
{method.isDefault && (
|
|
<Badge className="bg-primary/10 text-primary">Default</Badge>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Actions */}
|
|
<div className="flex gap-2">
|
|
<Button variant="ghost" size="sm">
|
|
<Edit className="w-4 h-4" />
|
|
</Button>
|
|
<Button variant="ghost" size="sm" className="text-red-400 hover:text-red-300">
|
|
<Trash2 className="w-4 h-4" />
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
))}
|
|
|
|
{/* Add New */}
|
|
<Button variant="outline" className="w-full border-border">
|
|
<Plus className="w-4 h-4 mr-2" />
|
|
Add Payment Method
|
|
</Button>
|
|
</CardContent>
|
|
</Card>
|
|
)
|
|
}
|