AppCard

1"use client";
2 
3import { ArrowUpRight01Icon } from "@hugeicons/core-free-icons";
4import { HugeiconsIcon } from "@hugeicons/react";
5import type { ComponentProps, ReactNode } from "react";
6 
7import { PlanBadge, StatusBadge } from "@/components/status-badge/status-badge";
8import type {
9  AppPlan,
10  AppStatus,
11} from "@/components/status-badge/status-badge";
12import { cn } from "@/lib/utils";
13 
14export type AppCardProps = Omit<ComponentProps<"a">, "children"> & {
15  /** App name, shown in mono. */
16  name: string;
17  /** Lifecycle state, rendered as a StatusBadge. */
18  status: AppStatus;
19  /** Billing plan, rendered as a PlanBadge. */
20  plan?: AppPlan;
21  /** One-line summary of what the app does. */
22  description?: string;
23  /** Last activity, already formatted, e.g. "2h ago". */
24  updatedAt?: string;
25  /**
26   * Status-colored grain rising from the bottom edge. Pass a ReactNode
27   * (e.g. a Paper Shaders GrainGradient) to replace the built-in CSS grain
28   * inside the same positioned, status-tinted slot.
29   */
30  wash?: boolean | ReactNode;
31};
32 
33/** Wash tint per status: color only ever comes from the vocabulary. */
34const STATUS_WASH: Record<AppStatus, string> = {
35  error: "text-destructive",
36  provisioning: "text-primary",
37  ready: "text-primary",
38  stopped: "text-muted-foreground",
39};
40 
41/* ─────────────────────────────────────────────────────────
42 * The dashboard grid card, on MetricCard's shell: hairline
43 * border warming on hover with a neon underline sweeping in
44 * under the name (transform-only, no layout shift). The
45 * corner arrow inks in alongside; the status vocabulary
46 * anchors the foot with the timestamp opposite. The whole
47 * card is one link.
48 * ───────────────────────────────────────────────────────── */
49export const AppCard = ({
50  className,
51  description,
52  name,
53  plan,
54  status,
55  updatedAt,
56  wash = true,
57  ...props
58}: AppCardProps) => (
59  <a
60    className={cn(
61      "group relative isolate flex min-h-[128px] cursor-pointer select-none flex-col overflow-hidden rounded-lg border border-border/60 bg-card p-4 no-underline shadow-none ring-0 transition-colors hover:border-border focus-visible:border-primary focus-visible:outline-none",
62      className
63    )}
64    data-slot="app-card"
65    data-status={status}
66    {...props}
67  >
68// … truncated