"use client"; import { Package } from "lucide-react"; import { cn } from "@/lib/utils"; type Status = "placed" | "packed" | "shipped" | "delivered"; interface Card9Props { orderId?: string; items?: number; status?: Status; eta?: string; className?: string; } const statusConfig: Record< Status, { label: string; dotClass: string; textClass: string } > = { placed: { label: "Order placed", dotClass: "bg-slate-400", textClass: "text-slate-600 dark:text-slate-300", }, packed: { label: "Packed", dotClass: "bg-amber-500", textClass: "text-amber-700 dark:text-amber-400", }, shipped: { label: "Shipped", dotClass: "bg-sky-500", textClass: "text-sky-700 dark:text-sky-400", }, delivered: { label: "Delivered", dotClass: "bg-emerald-500", textClass: "text-emerald-700 dark:text-emerald-400", }, }; export const card9Demo: Card9Props = { orderId: "BES-20481", items: 3, status: "shipped", eta: "Arrives Fri", }; export function Card9({ orderId = "ORDER-0001", items = 1, status = "placed", eta, className, }: Card9Props) { const config = statusConfig[status]; return (

#{orderId} · {items} item{items === 1 ? "" : "s"}

); }