"use client"; import { Crown } from "lucide-react"; import { cn } from "@/lib/utils"; type Tone = | "primary" | "foreground" | "violet" | "emerald" | "sky" | "amber" | "rose"; interface Commerce17Props { tier?: string; nextTier?: string; points?: number; nextThreshold?: number; tone?: Tone; className?: string; } const tileClasses: Record = { primary: "bg-primary text-primary-foreground", foreground: "bg-foreground text-background", violet: "bg-gradient-to-br from-violet-500 to-fuchsia-500 text-white", emerald: "bg-gradient-to-br from-emerald-500 to-teal-500 text-white", sky: "bg-gradient-to-br from-sky-500 to-indigo-500 text-white", amber: "bg-gradient-to-br from-amber-400 to-orange-500 text-white", rose: "bg-gradient-to-br from-rose-500 to-fuchsia-500 text-white", }; const barClasses: Record = { primary: "bg-primary", foreground: "bg-foreground", violet: "bg-gradient-to-r from-violet-500 to-fuchsia-500", emerald: "bg-gradient-to-r from-emerald-500 to-teal-500", sky: "bg-gradient-to-r from-sky-500 to-indigo-500", amber: "bg-gradient-to-r from-amber-400 to-orange-500", rose: "bg-gradient-to-r from-rose-500 to-fuchsia-500", }; export const commerce17Demo: Commerce17Props = { tier: "Gold", nextTier: "Platinum", points: 2140, nextThreshold: 2750, tone: "primary", }; export function Commerce17({ tier = "Silver", nextTier, points = 0, nextThreshold = 1000, tone = "primary", className, }: Commerce17Props) { const pct = Math.max(2, Math.min(100, (points / nextThreshold) * 100)); const remaining = Math.max(0, nextThreshold - points); return (

{tier} member Loyalty program

{points.toLocaleString()} pts

{nextTier && ( {remaining.toLocaleString()} pts to{" "} {nextTier} )}

); }