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>
60 lines
1.5 KiB
TypeScript
60 lines
1.5 KiB
TypeScript
'use client'
|
|
import { CreditCard, Link as LinkIcon, Wallet } from 'lucide-react'
|
|
import { Card } from '@/components/ui/card'
|
|
|
|
interface PaymentMethodCardProps {
|
|
id: string
|
|
icon: string
|
|
label: string
|
|
description: string
|
|
selected: boolean
|
|
onSelect: () => void
|
|
}
|
|
|
|
const iconMap: Record<string, React.ComponentType<{ className?: string }>> = {
|
|
card: CreditCard,
|
|
paypal: Wallet,
|
|
'stripe-link': LinkIcon,
|
|
}
|
|
|
|
export function PaymentMethodCard({
|
|
id,
|
|
icon,
|
|
label,
|
|
description,
|
|
selected,
|
|
onSelect,
|
|
}: PaymentMethodCardProps) {
|
|
const IconComponent = iconMap[icon] || CreditCard
|
|
|
|
return (
|
|
<Card
|
|
onClick={onSelect}
|
|
className={`cursor-pointer transition-all ${
|
|
selected
|
|
? 'border-primary bg-primary/5 ring-2 ring-primary/20'
|
|
: 'border-border bg-card hover:border-primary/50'
|
|
}`}
|
|
>
|
|
<div className="p-4 flex items-center gap-4">
|
|
<div
|
|
className={`w-5 h-5 rounded-full border-2 flex items-center justify-center ${
|
|
selected ? 'border-primary' : 'border-border'
|
|
}`}
|
|
>
|
|
{selected && (
|
|
<div className="w-3 h-3 rounded-full bg-primary" />
|
|
)}
|
|
</div>
|
|
<div className="p-2 bg-card border border-border rounded">
|
|
<IconComponent className="w-5 h-5" />
|
|
</div>
|
|
<div className="flex-1">
|
|
<h4 className="font-semibold text-foreground">{label}</h4>
|
|
<p className="text-sm text-muted-foreground">{description}</p>
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
)
|
|
}
|