Epicnabbo-Catalogus-Updated-Daily/src/components/public/ui.tsx

import type { ReactNode } from "react";

/**
 * Public-site design system, faithful to AtomCMS's "atom" theme. The signature
 * element is the content-card: a surface card with a primary-tinted header
 * (icon circle + title + subtitle) and a padded body. These mirror the atom
 * Blade components (content-card, stat blocks, empty states) so every public
 * page shares one consistent, themeable look.
 */

export function ContentCard({
  icon,
  title,
  subtitle,
  action,
  children,
  className,
  padded = true,
}: {
  icon?: string;
  title?: ReactNode;
  subtitle?: ReactNode;
  action?: ReactNode;
  children?: ReactNode;
  className?: string;
  padded?: boolean;
}) {
  const hasHead = title != null || icon != null || subtitle != null || action != null;
  return (
    <div className={`content-card${className ? ` ${className}` : ""}`}>
      {hasHead ? (
        <div className="content-card-head">
          {icon ? (
            <span className="content-card-icon" aria-hidden>
              {icon}
            </span>
          ) : null}
          <div className="content-card-head-text">
            {title != null ? <p className="content-card-title">{title}</p> : null}
            {subtitle != null ? <p className="content-card-subtitle">{subtitle}</p> : null}
          </div>
          {action ? <div className="content-card-action">{action}</div> : null}
        </div>
      ) : null}
      <div className={padded ? "content-card-body" : undefined}>{children}</div>
    </div>
  );
}

/** A value + label tile (profile stats, rare-value summaries, …). */
export function StatBlock({
  value,
  label,
  icon,
}: {
  value: ReactNode;
  label: string;
  icon?: string;
}) {
  return (
    <div className="stat-block">
      <div className="stat-block-value">
        {icon ? <span aria-hidden>{icon} </span> : null}
        {value}
      </div>
      <div className="stat-block-label">{label}</div>
    </div>
  );
}

/** Friendly empty state with an icon and a muted line. */
export function EmptyState({ icon = "📭", children }: { icon?: string; children: ReactNode }) {
  return (
    <div className="empty-state">
      <div className="empty-state-icon" aria-hidden>
        {icon}
      </div>
      <p className="muted" style={{ margin: 0 }}>
        {children}
      </p>
    </div>
  );
}

/** Online / offline pill with a status dot. */
export function OnlineBadge({ online }: { online: boolean }) {
  return (
    <span className={`online-badge${online ? " online" : ""}`}>
      <span className="online-dot" aria-hidden />
      {online ? "Online" : "Offline"}
    </span>
  );
}

/** Leaderboard rank chip — medals for the top three, number otherwise. */
export function RankBadge({ position }: { position: number }) {
  const medal = position === 1 ? "🥇" : position === 2 ? "🥈" : position === 3 ? "🥉" : null;
  return (
    <span className={`rank-badge rank-${position <= 3 ? position : "n"}`}>
      {medal ?? `#${position}`}
    </span>
  );
}

/* ── Skeleton loaders ────────────────────────────────────────── */

export function Skeleton({ className, style }: { className?: string; style?: React.CSSProperties }) {
  return (
    <div
      className={className}
      style={{
        ...style,
        backgroundColor: "color-mix(in srgb, var(--color-text-muted) 12%, transparent)",
        borderRadius: "6px",
        animation: "shimmer 1.5s ease-in-out infinite",
      }}
    />
  );
}

export function SkeletonCard({ lines = 3 }: { lines?: number }) {
  return (
    <div className="content-card" style={{ padding: "1rem" }}>
      <div className="content-card-head" style={{ margin: "-1rem -1rem 1rem" }}>
        <Skeleton style={{ width: "44px", height: "44px", borderRadius: "999px" }} />
        <div style={{ flex: 1, display: "grid", gap: "0.35rem" }}>
          <Skeleton style={{ height: "16px", width: "60%" }} />
          <Skeleton style={{ height: "12px", width: "40%" }} />
        </div>
      </div>
      {Array.from({ length: lines }).map((_, i) => (
        <Skeleton key={i} style={{ height: "12px", width: `${85 - i * 10}%`, marginBottom: "0.6rem" }} />
      ))}
    </div>
  );
}

export function SkeletonTable({ rows = 5 }: { rows?: number }) {
  return (
    <div className="content-card" style={{ padding: "0.5rem 1rem 1rem" }}>
      {Array.from({ length: rows }).map((_, i) => (
        <div key={i} style={{ display: "flex", alignItems: "center", gap: "0.75rem", padding: "0.6rem 0", borderTop: i > 0 ? "1px solid color-mix(in srgb, var(--color-text-muted) 12%, transparent)" : undefined }}>
          {i === 0 ? (
            <>
              <Skeleton style={{ height: "12px", width: "30%" }} />
              <Skeleton style={{ height: "12px", width: "20%" }} />
              <Skeleton style={{ height: "12px", width: "25%", marginLeft: "auto" }} />
            </>
          ) : (
            <>
              <Skeleton style={{ width: "28px", height: "28px", borderRadius: "8px" }} />
              <Skeleton style={{ height: "14px", width: "35%" }} />
              <Skeleton style={{ height: "14px", width: "20%", marginLeft: "auto" }} />
            </>
          )}
        </div>
      ))}
    </div>
  );
}