Components

​

Component organization

components/
  ui/               # shadcn/ui primitives
  app-shell/        # Main layout
  team/             # Admin components
  creator/          # Creator components
  strategy/         # Strategy views
  metrics/          # Charts and analytics

​

App Shell

​

AppShell

• Collapsible sidebar
• Header with user menu
• Notification bell
• Global search

​

Sidebar

• Role-based menu items
• Collapsible groups
• Active state indicators

​

Navigation items

export const adminNavItems = [
  { label: "Dashboard", href: "/team/dashboard", icon: Home },
  { label: "Brands", href: "/team/brands", icon: Building },
  // ...
];

export const creatorNavItems = [
  { label: "Dashboard", href: "/community/dashboard", icon: Home },
  // ...
];

​

NotificationMenu

• Unread count badge
• Notification list
• Mark as read actions
• Real-time updates

​

RealtimeSubscriptions

• Notification channel
• Query invalidation on updates

​

UI Primitives

​

Combobox

<Combobox
  options={brands.map(b => ({ value: b.id, label: b.name }))}
  value={selectedBrand}
  onChange={setSelectedBrand}
  placeholder="Search brands..."
/>

​

SilentErrorBoundary

<SilentErrorBoundary>
  <CreatorWidget />
</SilentErrorBoundary>

​

Team components

​

BrandPicker

• Combobox interface
• Recent brands
• All brands search

​

CreatorCard

• Avatar
• Name and tier
• Metrics summary
• Action buttons

​

MetricCard

• Label
• Value
• Trend indicator
• Sparkline (optional)

​

Creator components

​

DealCard

• Gamified design
• Prize podium
• Platform logos
• Apply button

​

BrandHubCard

• Brand logo
• Progress bar
• Quick stats

​

TierBadge

• Galaxy, Moonwalker, Rocket, Beginner
• Color-coded
• Icon variants

​

Strategy components

​

StrategyDocument

• Markdown parsing
• Embedded media
• Section navigation

​

StrategyEditor

• Rich text editing
• Image upload
• Preview mode

​

Metrics components

​

Chart

• Line charts
• Bar charts
• Area charts
• Consistent styling

​

MetricsOverview

• Key metric tiles
• Time period selection
• Platform breakdown

​

Styling patterns

​

Tailwind utilities

import { cn } from "@/lib/utils";

<div className={cn(
  "rounded-lg border p-4",
  isActive && "border-primary",
  className
)}>

​

CSS variables

:root {
  --evo-orange: #e16100;
  --evo-hunter: #414f47;
}

​

Dark mode

.dark {
  --background: 0 0% 8%;
  --foreground: 0 0% 98%;
}

​

Conventions

1. Use cn() for class merging
2. Prefer composition over configuration
3. Colocate route components in _components/
4. Wrap non-critical widgets in error boundaries