// src/components/ui/ProductCards.tsx "use client"; import type { ReactNode } from "react"; import { Pin } from "lucide-react"; import Card from "./Card"; import { Badge, StatusBadge, type Status } from "./Badge"; import { Avatar } from "./Avatar"; import Button from "./Button"; import { cx } from "@/lib/cx"; import Sparkline from "@/components/charts/Sparkline"; /* ---------- ToolCard — Home dashboard tool launcher ---------- */ export interface ToolCardProps { icon: ReactNode; title: string; tier?: string; description: string; onOpen: () => void; pinned?: boolean; onPinToggle?: () => void; } export function ToolCard({ icon, title, tier, description, onOpen, pinned, onPinToggle }: ToolCardProps) { return (

{title}

{tier && {tier}}

{onPinToggle && ( )}

{description}

); } /* ---------- EntityCard — layouts, campaigns, collections in grids ---------- */ export interface EntityCardProps { title: string; status: Status; /** Thumbnail image URL; falls back to a paper monogram. */ imageUrl?: string; imageAlt?: string; /** Custom thumbnail content (e.g. a layout schematic) — overrides imageUrl. */ thumb?: ReactNode; /** Caption line under the title (composition summary, counts). */ subtitle?: string; /** Platform icons or labels, rendered leading in the meta row. */ platforms?: ReactNode; owner: string; timestamp: string; onOpen: () => void; } export function EntityCard({ title, status, imageUrl, imageAlt = "", thumb, subtitle, platforms, owner, timestamp, onOpen, }: EntityCardProps) { return ( { if (e.key === "Enter" || e.key === " ") { e.preventDefault(); onOpen(); } }} >

{thumb ?? (imageUrl ? {imageAlt}

: )}

{title}

{subtitle &&

{subtitle}

}

{platforms && {platforms}} {timestamp}

); } /* ---------- StatCard — analytics summary numbers ---------- */ export interface StatCardProps { label: string; value: string; icon?: ReactNode; /** Delta note, e.g. "+12% vs last 30 days". */ note?: string; trend?: "up" | "down"; /** Decorative trend values rendered as a sparkline beside the value. */ spark?: number[]; } export function StatCard({ label, value, icon, note, trend, spark }: StatCardProps) { return ( {label} {icon && } {spark ? ( {value} ) : ( {value} )} {note && ( {note} )} ); }