@etherealui/react 0.0.0-stage → 0.0.3

package/src/primitives/table.tsx

@@ -0,0 +1,47 @@
+import * as React from "react"
+import { cn } from "../utils/cn"
+
+export const Table = React.forwardRef<
+  HTMLTableElement,
+  React.HTMLAttributes<HTMLTableElement>
+>(({ className, ...props }, ref) => (
+  <div className="w-full overflow-x-auto rounded-xl border border-zinc-200 bg-white dark:border-zinc-800 dark:bg-zinc-900">
+    <table
+      ref={ref}
+      className={cn("w-full border-collapse text-left text-xs", className)}
+      {...props}
+    />
+  </div>
+))
+Table.displayName = "Table"
+
+export const TableHeader = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <thead
+    ref={ref}
+    className={cn(
+      "border-b border-zinc-200 bg-zinc-50/80 text-[11px] font-medium text-zinc-500 dark:border-zinc-800 dark:bg-zinc-950/50 dark:text-zinc-400",
+      className
+    )}
+    {...props}
+  />
+))
+TableHeader.displayName = "TableHeader"
+
+export const TableBody = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <tbody
+    ref={ref}
+    className={cn(
+      "divide-y divide-zinc-200 dark:divide-zinc-800",
+      className
+    )}
+    {...props}
+  />
+))
+TableBody.displayName = "TableBody"
+

package/src/primitives/tabs.tsx

@@ -0,0 +1,86 @@
+import * as React from "react"
+import * as TabsPrimitive from "@radix-ui/react-tabs"
+import { cva, type VariantProps } from "class-variance-authority"
+import { cn } from "../utils/cn"
+
+const Tabs = TabsPrimitive.Root
+
+const tabsListVariants = cva("inline-flex items-center text-zinc-500 dark:text-zinc-400", {
+  variants: {
+    variant: {
+      segmented:
+        "h-9 rounded-lg border border-zinc-200 bg-zinc-100/80 p-1 gap-1 dark:border-zinc-800 dark:bg-zinc-900",
+      underline:
+        "w-full justify-start border-b border-zinc-200 bg-transparent gap-6 px-1 dark:border-zinc-800",
+      pills: "gap-1.5 bg-transparent",
+    },
+  },
+  defaultVariants: {
+    variant: "segmented",
+  },
+})
+
+export interface TabsListProps
+  extends React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>,
+    VariantProps<typeof tabsListVariants> {}
+
+const TabsList = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.List>,
+  TabsListProps
+>(({ className, variant, ...props }, ref) => (
+  <TabsPrimitive.List
+    ref={ref}
+    className={cn(tabsListVariants({ variant, className }))}
+    {...props}
+  />
+))
+TabsList.displayName = TabsPrimitive.List.displayName
+
+const tabsTriggerVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap text-xs font-medium transition-all focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50 cursor-pointer select-none",
+  {
+    variants: {
+      variant: {
+        segmented:
+          "rounded-md px-3 py-1 data-[state=active]:bg-white data-[state=active]:text-zinc-900 data-[state=active]:shadow-2xs hover:text-zinc-900 dark:data-[state=active]:bg-zinc-800 dark:data-[state=active]:text-zinc-100 dark:hover:text-zinc-200",
+        underline:
+          "border-b-2 border-transparent pb-2.5 pt-1 text-zinc-500 data-[state=active]:border-blue-600 data-[state=active]:text-zinc-900 hover:text-zinc-800 dark:text-zinc-400 dark:data-[state=active]:border-blue-500 dark:data-[state=active]:text-zinc-100 dark:hover:text-zinc-200",
+        pills:
+          "rounded-lg px-3 py-1.5 border border-transparent data-[state=active]:bg-blue-50 data-[state=active]:text-blue-700 data-[state=active]:border-blue-200 hover:bg-zinc-100 dark:data-[state=active]:bg-blue-500/15 dark:data-[state=active]:text-blue-300 dark:data-[state=active]:border-blue-500/30 dark:hover:bg-zinc-800",
+      },
+    },
+    defaultVariants: {
+      variant: "segmented",
+    },
+  }
+)
+
+export interface TabsTriggerProps
+  extends React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>,
+    VariantProps<typeof tabsTriggerVariants> {}
+
+const TabsTrigger = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Trigger>,
+  TabsTriggerProps
+>(({ className, variant, ...props }, ref) => (
+  <TabsPrimitive.Trigger
+    ref={ref}
+    className={cn(tabsTriggerVariants({ variant, className }))}
+    {...props}
+  />
+))
+TabsTrigger.displayName = TabsPrimitive.Trigger.displayName
+
+const TabsContent = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.Content
+    ref={ref}
+    className={cn("mt-3 focus-visible:outline-none", className)}
+    {...props}
+  />
+))
+TabsContent.displayName = TabsPrimitive.Content.displayName
+
+export { Tabs, TabsList, TabsTrigger, TabsContent }

package/src/primitives/textarea.tsx

@@ -0,0 +1,40 @@
+import * as React from "react"
+import { cn } from "../utils/cn"
+
+export interface TextareaProps
+  extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
+  autoResize?: boolean
+}
+
+export const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
+  ({ className, autoResize = false, onChange, ...props }, ref) => {
+    const innerRef = React.useRef<HTMLTextAreaElement | null>(null)
+
+    const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+      if (autoResize && innerRef.current) {
+        innerRef.current.style.height = "auto"
+        innerRef.current.style.height = `${innerRef.current.scrollHeight}px`
+      }
+      onChange?.(e)
+    }
+
+    return (
+      <textarea
+        ref={(node) => {
+          innerRef.current = node
+          if (typeof ref === "function") ref(node)
+          else if (ref) ref.current = node
+        }}
+        onChange={handleChange}
+        className={cn(
+          "flex min-h-[84px] w-full rounded-lg border border-zinc-200 bg-white px-3 py-2 text-sm text-zinc-900 placeholder:text-zinc-400 transition-colors focus-visible:outline-none focus-visible:border-blue-500 focus-visible:ring-2 focus-visible:ring-blue-500/20 disabled:cursor-not-allowed disabled:opacity-50 dark:border-zinc-800 dark:bg-zinc-900 dark:text-zinc-100 dark:placeholder:text-zinc-500",
+          autoResize && "resize-none overflow-hidden",
+          className
+        )}
+        {...props}
+      />
+    )
+  }
+)
+Textarea.displayName = "Textarea"
+

package/src/primitives/toast.tsx

@@ -0,0 +1,71 @@
+import * as React from "react"
+import { CheckCircle2, AlertTriangle, XCircle, Info, X } from "lucide-react"
+import { cn } from "../utils/cn"
+
+export type ToastVariant = "success" | "error" | "warning" | "info"
+
+export interface ToastItem {
+  id: string
+  title: string
+  description?: string
+  variant?: ToastVariant
+}
+
+const iconMap: Record<ToastVariant, React.ReactNode> = {
+  success: <CheckCircle2 className="h-4 w-4 text-emerald-600 dark:text-emerald-400 shrink-0" />,
+  error: <XCircle className="h-4 w-4 text-rose-600 dark:text-rose-400 shrink-0" />,
+  warning: <AlertTriangle className="h-4 w-4 text-amber-600 dark:text-amber-400 shrink-0" />,
+  info: <Info className="h-4 w-4 text-blue-600 dark:text-blue-400 shrink-0" />,
+}
+
+const borderMap: Record<ToastVariant, string> = {
+  success: "border-zinc-200 bg-white dark:border-zinc-800 dark:bg-zinc-900",
+  error: "border-rose-200 bg-rose-50/40 dark:border-rose-500/30 dark:bg-rose-950/20",
+  warning: "border-amber-200 bg-amber-50/40 dark:border-amber-500/30 dark:bg-amber-950/20",
+  info: "border-zinc-200 bg-white dark:border-zinc-800 dark:bg-zinc-900",
+}
+
+export interface ToastCardProps extends Omit<ToastItem, "id"> {
+  onDismiss?: () => void
+  className?: string
+}
+
+export const ToastCard: React.FC<ToastCardProps> = ({
+  title,
+  description,
+  variant = "info",
+  onDismiss,
+  className,
+}) => {
+  return (
+    <div
+      role="status"
+      className={cn(
+        "flex w-full max-w-sm items-start gap-3 rounded-xl border p-3.5 text-zinc-900 shadow-md transition-all dark:text-zinc-100",
+        borderMap[variant],
+        className
+      )}
+    >
+      <div className="mt-0.5">{iconMap[variant]}</div>
+      <div className="flex-1 space-y-1">
+        <p className="text-xs font-semibold leading-none text-zinc-900 dark:text-zinc-100">
+          {title}
+        </p>
+        {description && (
+          <p className="text-xs text-zinc-500 dark:text-zinc-400 leading-relaxed">
+            {description}
+          </p>
+        )}
+      </div>
+      {onDismiss && (
+        <button
+          type="button"
+          onClick={onDismiss}
+          className="rounded-md p-1 text-zinc-400 hover:bg-zinc-100 hover:text-zinc-700 dark:hover:bg-zinc-800 dark:hover:text-zinc-200 cursor-pointer"
+        >
+          <X className="h-3.5 w-3.5" />
+        </button>
+      )}
+    </div>
+  )
+}

package/src/primitives/tooltip.tsx

@@ -0,0 +1,58 @@
+import * as React from "react"
+import * as TooltipPrimitive from "@radix-ui/react-tooltip"
+import * as PopoverPrimitive from "@radix-ui/react-popover"
+import { cn } from "../utils/cn"
+
+const TooltipProvider = TooltipPrimitive.Provider
+const Tooltip = TooltipPrimitive.Root
+const TooltipTrigger = TooltipPrimitive.Trigger
+
+const TooltipContent = React.forwardRef<
+  React.ElementRef<typeof TooltipPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
+>(({ className, sideOffset = 6, ...props }, ref) => (
+  <TooltipPrimitive.Portal>
+    <TooltipPrimitive.Content
+      ref={ref}
+      sideOffset={sideOffset}
+      className={cn(
+        "z-50 overflow-hidden rounded-lg border border-zinc-200 bg-zinc-900 px-2.5 py-1.5 text-xs text-white shadow-md dark:border-zinc-800 dark:bg-zinc-100 dark:text-zinc-900",
+        className
+      )}
+      {...props}
+    />
+  </TooltipPrimitive.Portal>
+))
+TooltipContent.displayName = TooltipPrimitive.Content.displayName
+
+const Popover = PopoverPrimitive.Root
+const PopoverTrigger = PopoverPrimitive.Trigger
+
+const PopoverContent = React.forwardRef<
+  React.ElementRef<typeof PopoverPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
+>(({ className, align = "center", sideOffset = 6, ...props }, ref) => (
+  <PopoverPrimitive.Portal>
+    <PopoverPrimitive.Content
+      ref={ref}
+      align={align}
+      sideOffset={sideOffset}
+      className={cn(
+        "z-50 w-72 rounded-xl border border-zinc-200 bg-white p-4 text-zinc-900 shadow-lg outline-none dark:border-zinc-800 dark:bg-zinc-900 dark:text-zinc-100",
+        className
+      )}
+      {...props}
+    />
+  </PopoverPrimitive.Portal>
+))
+PopoverContent.displayName = PopoverPrimitive.Content.displayName
+
+export {
+  Tooltip,
+  TooltipTrigger,
+  TooltipContent,
+  TooltipProvider,
+  Popover,
+  PopoverTrigger,
+  PopoverContent,
+}

package/src/styles/globals.css

@@ -0,0 +1,49 @@
+@import "tailwindcss";
+@source "../**/*.{ts,tsx}";
+
+@custom-variant dark (&:where(.dark, .dark *));
+
+@theme {
+  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
+}
+
+:root {
+  --bg-canvas: #ffffff;
+  --bg-subtle: #fafafa;
+  --bg-muted: #f4f4f5;
+  --bg-elevated: #ffffff;
+  --fg-primary: #18181b;
+  --fg-secondary: #52525b;
+  --fg-muted: #71717a;
+  --border-default: #e4e4e7;
+  --border-subtle: #f4f4f5;
+  --accent-primary: #2563eb;
+  --accent-soft: #dbeafe;
+  color-scheme: light;
+}
+
+.dark {
+  --bg-canvas: #09090b;
+  --bg-subtle: #121215;
+  --bg-muted: #18181b;
+  --bg-elevated: #18181b;
+  --fg-primary: #fafafa;
+  --fg-secondary: #a1a1aa;
+  --fg-muted: #71717a;
+  --border-default: #27272a;
+  --border-subtle: #18181b;
+  --accent-primary: #3b82f6;
+  --accent-soft: rgba(59, 130, 246, 0.15);
+  color-scheme: dark;
+}
+
+@layer base {
+  body {
+    background-color: var(--bg-canvas);
+    color: var(--fg-primary);
+    font-family: var(--font-sans);
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+}

package/src/templates/control-tower.tsx

@@ -0,0 +1,41 @@
+import * as React from "react"
+import { cn } from "../utils/cn"
+import {
+  SidebarShell,
+  HeaderNavbar,
+  PageHeaderBar,
+} from "../blocks/app-shell"
+import { AdvancedFilterBar } from "../blocks/filter-bar"
+import { EnterpriseDataTable } from "../blocks/data-table"
+
+export const ControlTowerTemplate: React.FC<{ className?: string }> = ({
+  className,
+}) => {
+  return (
+    <div
+      className={cn(
+        "flex min-h-[720px] w-full overflow-hidden rounded-2xl border border-zinc-200 bg-zinc-50/40 text-zinc-900 shadow-sm dark:border-zinc-800 dark:bg-zinc-950 dark:text-zinc-100",
+        className
+      )}
+    >
+      <SidebarShell activeId="customers" />
+
+      <div className="flex flex-1 flex-col min-w-0">
+        <HeaderNavbar
+          breadcrumbs={["Workspace", "Customers", "Directory"]}
+        />
+
+        <main className="flex-1 space-y-5 overflow-y-auto p-6">
+          <PageHeaderBar
+            title="Customer Directory"
+            subtitle="Search, filter, and inspect customer subscriptions. Click any row to open the details drawer."
+          />
+
+          <AdvancedFilterBar />
+
+          <EnterpriseDataTable />
+        </main>
+      </div>
+    </div>
+  )
+}

package/src/templates/executive-analytics.tsx

@@ -0,0 +1,272 @@
+import * as React from "react"
+import { ArrowUpRight, RefreshCw } from "lucide-react"
+import { cn } from "../utils/cn"
+import {
+  SidebarShell,
+  HeaderNavbar,
+  PageHeaderBar,
+} from "../blocks/app-shell"
+import { MultiMetricGrid, ProgressMetricCard } from "../blocks/stat-cards"
+import { Badge } from "../primitives/badge"
+import { Button, ToggleGroup } from "../primitives/button"
+import { Avatar } from "../primitives/avatar"
+import { CommandPalette } from "../primitives/command-palette"
+
+const chartSeriesData: Record<
+  string,
+  Array<{ label: string; revenue: number; signups: number }>
+> = {
+  "30d": [
+    { label: "Oct 08", revenue: 62, signups: 48 },
+    { label: "Oct 12", revenue: 68, signups: 54 },
+    { label: "Oct 16", revenue: 64, signups: 59 },
+    { label: "Oct 20", revenue: 75, signups: 66 },
+    { label: "Oct 24", revenue: 81, signups: 72 },
+    { label: "Oct 28", revenue: 79, signups: 76 },
+    { label: "Nov 01", revenue: 89, signups: 84 },
+    { label: "Nov 06", revenue: 96, signups: 92 },
+  ],
+  "7d": [
+    { label: "Mon", revenue: 74, signups: 68 },
+    { label: "Tue", revenue: 79, signups: 72 },
+    { label: "Wed", revenue: 83, signups: 77 },
+    { label: "Thu", revenue: 80, signups: 75 },
+    { label: "Fri", revenue: 88, signups: 85 },
+    { label: "Sat", revenue: 92, signups: 89 },
+    { label: "Sun", revenue: 97, signups: 94 },
+  ],
+}
+
+const recentActivity = [
+  {
+    id: "act-1",
+    title: "Linear Orbit Inc. upgraded to Enterprise Annual",
+    meta: "+$4,200 MRR • Invoice #INV-2094 paid",
+    time: "12m ago",
+    fallback: "LO",
+  },
+  {
+    id: "act-2",
+    title: "Raycast Labs added 12 team seats",
+    meta: "Pro Plan expansion •Prorated billing applied",
+    time: "42m ago",
+    fallback: "RL",
+  },
+  {
+    id: "act-3",
+    title: "Weekly financial summary exported",
+    meta: "Generated by Elena Rostova",
+    time: "2h ago",
+    fallback: "ER",
+  },
+]
+
+const topCustomers = [
+  {
+    name: "Linear Orbit Inc.",
+    domain: "linearorbit.io",
+    fallback: "LO",
+    mrr: "$4,200",
+    growth: "+18.4%",
+    status: "Enterprise",
+  },
+  {
+    name: "Raycast Labs GmbH",
+    domain: "raycastlabs.de",
+    fallback: "RL",
+    mrr: "$3,150",
+    growth: "+12.1%",
+    status: "Enterprise",
+  },
+  {
+    name: "Northstar Analytics",
+    domain: "northstar.co",
+    fallback: "NA",
+    mrr: "$1,950",
+    growth: "+9.4%",
+    status: "Scale",
+  },
+]
+
+export const ExecutiveAnalyticsTemplate: React.FC<{ className?: string }> = ({
+  className,
+}) => {
+  const [range, setRange] = React.useState("30d")
+  const [cmdOpen, setCmdOpen] = React.useState(false)
+  const points = chartSeriesData[range] || chartSeriesData["30d"]
+
+  return (
+    <div
+      className={cn(
+        "flex min-h-[720px] w-full overflow-hidden rounded-2xl border border-zinc-200 bg-zinc-50/40 text-zinc-900 shadow-sm dark:border-zinc-800 dark:bg-zinc-950 dark:text-zinc-100",
+        className
+      )}
+    >
+      <CommandPalette
+        open={cmdOpen}
+        onOpenChange={setCmdOpen}
+        enableGlobalShortcut={false}
+      />
+
+      <SidebarShell activeId="overview" />
+
+      <div className="flex flex-1 flex-col min-w-0">
+        <HeaderNavbar
+          breadcrumbs={["Workspace", "Analytics", "Overview"]}
+          onOpenCommandPalette={() => setCmdOpen(true)}
+        />
+
+        <main className="flex-1 space-y-6 overflow-y-auto p-6">
+          <PageHeaderBar
+            title="Analytics Overview"
+            subtitle="Track recurring revenue, subscriber retention, and account expansion."
+          />
+
+          <MultiMetricGrid />
+
+          <div className="grid grid-cols-1 gap-6 xl:grid-cols-3">
+            <div className="xl:col-span-2 rounded-xl border border-zinc-200 bg-white p-5 flex flex-col justify-between dark:border-zinc-800 dark:bg-zinc-900">
+              <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between border-b border-zinc-200 pb-4 dark:border-zinc-800">
+                <div>
+                  <div className="flex items-center gap-2">
+                    <h3 className="text-sm font-semibold text-zinc-900 dark:text-zinc-100">
+                      Revenue &amp; Subscriber Growth
+                    </h3>
+                    <Badge variant="emerald">+14.2%</Badge>
+                  </div>
+                  <p className="mt-0.5 text-xs text-zinc-500 dark:text-zinc-400">
+                    Net settled volume across active subscriptions
+                  </p>
+                </div>
+
+                <ToggleGroup
+                  size="sm"
+                  value={range}
+                  onValueChange={setRange}
+                  items={[
+                    { value: "7d", label: "7d" },
+                    { value: "30d", label: "30d" },
+                  ]}
+                />
+              </div>
+
+              <div className="mt-6 grid grid-cols-8 items-end gap-3 h-48 pt-4 px-2">
+                {points.map((pt) => (
+                  <div
+                    key={pt.label}
+                    className="group flex flex-col items-center gap-2 h-full justify-end"
+                  >
+                    <div className="w-full flex items-end justify-center gap-1.5 h-full">
+                      <div
+                        style={{ height: `${pt.revenue}%` }}
+                        className="w-full max-w-[18px] rounded-t-md bg-blue-600 transition-all duration-300 group-hover:bg-blue-500"
+                      />
+                      <div
+                        style={{ height: `${pt.signups}%` }}
+                        className="w-full max-w-[14px] rounded-t-md bg-zinc-200 transition-all duration-300 dark:bg-zinc-700"
+                      />
+                    </div>
+                    <span className="text-[10px] text-zinc-400">
+                      {pt.label}
+                    </span>
+                  </div>
+                ))}
+              </div>
+            </div>
+
+            <div className="space-y-4">
+              <ProgressMetricCard />
+
+              <div className="rounded-xl border border-zinc-200 bg-white p-5 space-y-4 dark:border-zinc-800 dark:bg-zinc-900">
+                <div className="flex items-center justify-between">
+                  <h3 className="text-xs font-semibold text-zinc-700 dark:text-zinc-300">
+                    Recent Activity
+                  </h3>
+                  <RefreshCw className="h-3.5 w-3.5 text-zinc-400" />
+                </div>
+
+                <div className="space-y-3.5">
+                  {recentActivity.map((item, idx) => (
+                    <div
+                      key={item.id}
+                      className="flex items-start justify-between gap-3 text-xs"
+                    >
+                      <div className="flex items-start gap-2.5">
+                        <Avatar
+                          fallback={item.fallback}
+                          tint={idx % 2 === 0 ? "blue" : "neutral"}
+                          size="xs"
+                        />
+                        <div>
+                          <p className="font-medium text-zinc-800 dark:text-zinc-200">
+                            {item.title}
+                          </p>
+                          <p className="text-[11px] text-zinc-400">
+                            {item.meta}
+                          </p>
+                        </div>
+                      </div>
+                      <span className="text-[10px] text-zinc-400 shrink-0">
+                        {item.time}
+                      </span>
+                    </div>
+                  ))}
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div className="rounded-xl border border-zinc-200 bg-white overflow-hidden dark:border-zinc-800 dark:bg-zinc-900">
+            <div className="flex items-center justify-between border-b border-zinc-200 px-5 py-3.5 dark:border-zinc-800">
+              <div>
+                <h3 className="text-sm font-semibold text-zinc-900 dark:text-zinc-100">
+                  Top Accounts
+                </h3>
+                <p className="text-xs text-zinc-500">
+                  Sorted by monthly recurring revenue
+                </p>
+              </div>
+              <Button variant="outline" size="sm">
+                View all
+                <ArrowUpRight className="h-3.5 w-3.5" />
+              </Button>
+            </div>
+            <div className="divide-y divide-zinc-200 dark:divide-zinc-800">
+              {topCustomers.map((cust, i) => (
+                <div
+                  key={cust.name}
+                  className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between px-5 py-3 text-xs"
+                >
+                  <div className="flex items-center gap-3">
+                    <Avatar
+                      fallback={cust.fallback}
+                      tint={i % 2 === 0 ? "blue" : "neutral"}
+                      size="sm"
+                    />
+                    <div>
+                      <p className="font-medium text-zinc-900 dark:text-zinc-100">
+                        {cust.name}
+                      </p>
+                      <p className="text-[11px] text-zinc-400">{cust.domain}</p>
+                    </div>
+                  </div>
+                  <div className="flex items-center gap-6">
+                    <Badge variant="default">{cust.status}</Badge>
+                    <div className="text-right">
+                      <span className="font-semibold text-zinc-900 dark:text-zinc-100">
+                        {cust.mrr}
+                      </span>
+                      <span className="ml-2 text-emerald-600 dark:text-emerald-400">
+                        {cust.growth}
+                      </span>
+                    </div>
+                  </div>
+                </div>
+              ))}
+            </div>
+          </div>
+        </main>
+      </div>
+    </div>
+  )
+}