"use client"; import * as React from "react"; import { AnimatePresence, motion } from "motion/react"; import { ArrowRight, MapPin } from "lucide-react"; import { cn } from "@/lib/utils"; interface ClientCardProps { name?: string; country?: string; image?: string; service?: string; amountPaid?: number; totalAmount?: number; plan?: "Starter" | "Professional" | "Enterprise"; deadline?: Date; startDate?: Date; className?: string; } const GRADIENTS = { green: { from: "#22c55e", to: "#4ade80" }, blue: { from: "#dbeafe", to: "#3b82f6" }, orange: { from: "#ffedd5", to: "#f97316" }, primary: { from: "#6366f1", to: "#818cf8" }, } as const; type GradientVariant = keyof typeof GRADIENTS; const CLIENT_PROFILES = [ "/unsplash/1522075469751-3a6694fb2f61.webp", "/unsplash/1534308143481-c55f00be8bd7.webp", "/unsplash/1476514525535-07fb3b4ae5f1.webp", "/unsplash/1507003211169-0a1dd7228f2d.webp", "/unsplash/1438761681033-6461ffad8d80.webp", "/unsplash/1472099645785-5658abf4ff4e.webp", "/unsplash/1517841905240-472988babdf9.webp", "/unsplash/1500648767791-00dcc994a43e.webp", ]; function toPersianDigits(value: string | number) { return String(value).replace(/\d/g, (d) => "۰۱۲۳۴۵۶۷۸۹"[Number(d)]!); } function CircularProgress({ value, size = 28, strokeWidth = 3, id, variant = "primary", }: { value: number; size?: number; strokeWidth?: number; id: string; variant?: GradientVariant; }) { const radius = (size - strokeWidth) / 2; const circumference = radius * 2 * Math.PI; const offset = circumference - (value / 100) * circumference; const colors = GRADIENTS[variant]; return (

); } export function ClientCard({ name = "سارا جنکینز", country = "بریتانیا", image = "/unsplash/1438761681033-6461ffad8d80.webp", service = "مدیریت شبکه‌های اجتماعی و استراتژی محتوا", amountPaid = 4500, totalAmount = 6000, plan = "Professional", deadline = new Date("2024-06-01"), startDate = new Date("2024-01-01"), className, }: ClientCardProps) { const paymentPercentage = Math.min((amountPaid / totalAmount) * 100, 100); const idPrefix = React.useId().replace(/:/g, ""); const now = new Date(); const totalTime = deadline.getTime() - startDate.getTime(); const elapsedTime = now.getTime() - startDate.getTime(); const timePercentage = Math.min( Math.max((elapsedTime / totalTime) * 100, 0), 100, ); const diffDays = Math.ceil( (deadline.getTime() - now.getTime()) / (1000 * 60 * 60 * 24), ); const timeLeftLabel = diffDays < 0 ? "معوق" : diffDays === 0 ? "امروز" : diffDays < 30 ? `${toPersianDigits(diffDays)} روز مانده` : diffDays < 365 ? `${toPersianDigits(Math.floor(diffDays / 30))} ماه مانده` : `${toPersianDigits((diffDays / 365).toFixed(1))} سال مانده`; const [isExpanded, setIsExpanded] = React.useState(false); return (

{isExpanded ? (

{Array.from({ length: 4 }, (_, idx) => (

))}

) : ( {CLIENT_PROFILES.slice(0, 3).map((src, idx) => ( ))} {CLIENT_PROFILES.length > 3 && ( { event.stopPropagation(); setIsExpanded(true); }} transition={{ type: "spring", stiffness: 350, damping: 35 }} > +{toPersianDigits(CLIENT_PROFILES.length - 3)} )} )}

{isExpanded && ( setIsExpanded(false)} > setIsExpanded(false)} className="flex cursor-pointer items-center gap-1.5 text-xs font-medium text-muted-foreground transition-colors hover:text-foreground" > بازگشت

{CLIENT_PROFILES.map((src, idx) => ( ))}

)}

{image ? ( {name}

) : (

{name .split(" ") .map((n) => n[0]) .join("")}

)}

{name}

{country}

{service}

مبلغ پرداخت‌شده {toPersianDigits(Math.round(paymentPercentage))}٪

مهلت {timeLeftLabel}

); } export default function ClientCardExample() { return ; }