489 lines
21 KiB
TypeScript
489 lines
21 KiB
TypeScript
"use client"
|
|
|
|
import { Button } from "@/components/ui/button"
|
|
import { Input } from "@/components/ui/input"
|
|
import { Textarea } from "@/components/ui/textarea"
|
|
import { Checkbox } from "@/components/ui/checkbox"
|
|
import { Switch } from "@/components/ui/switch"
|
|
import { Badge } from "@/components/ui/badge"
|
|
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
|
|
import {
|
|
Select,
|
|
SelectContent,
|
|
SelectItem,
|
|
SelectTrigger,
|
|
SelectValue,
|
|
} from "@/components/ui/select"
|
|
import {
|
|
Tooltip,
|
|
TooltipContent,
|
|
TooltipProvider,
|
|
TooltipTrigger,
|
|
} from "@/components/ui/tooltip"
|
|
import { Label } from "@/components/ui/label"
|
|
import {
|
|
Plus,
|
|
Trash2,
|
|
Settings,
|
|
Mail,
|
|
Send,
|
|
Download,
|
|
Search,
|
|
X,
|
|
Check,
|
|
ChevronRight,
|
|
Edit,
|
|
Copy
|
|
} from "lucide-react"
|
|
|
|
export function ComponentMatrix() {
|
|
return (
|
|
<TooltipProvider>
|
|
<div className="space-y-10">
|
|
{/* Buttons - All Variants */}
|
|
<div>
|
|
<h4 className="font-sans text-sm font-semibold uppercase tracking-wide text-muted-foreground mb-4">
|
|
Buttons — Variants
|
|
</h4>
|
|
<div className="border border-border rounded-md p-6 bg-card">
|
|
<div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4">
|
|
<div className="space-y-2">
|
|
<p className="font-sans text-xs text-muted-foreground">Primary</p>
|
|
<Button>Primary</Button>
|
|
</div>
|
|
<div className="space-y-2">
|
|
<p className="font-sans text-xs text-muted-foreground">Secondary</p>
|
|
<Button variant="secondary">Secondary</Button>
|
|
</div>
|
|
<div className="space-y-2">
|
|
<p className="font-sans text-xs text-muted-foreground">Outline</p>
|
|
<Button variant="outline">Outline</Button>
|
|
</div>
|
|
<div className="space-y-2">
|
|
<p className="font-sans text-xs text-muted-foreground">Ghost</p>
|
|
<Button variant="ghost">Ghost</Button>
|
|
</div>
|
|
<div className="space-y-2">
|
|
<p className="font-sans text-xs text-muted-foreground">Link</p>
|
|
<Button variant="link">Link</Button>
|
|
</div>
|
|
<div className="space-y-2">
|
|
<p className="font-sans text-xs text-muted-foreground">Destructive</p>
|
|
<Button variant="destructive">Destructive</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Buttons - Sizes */}
|
|
<div>
|
|
<h4 className="font-sans text-sm font-semibold uppercase tracking-wide text-muted-foreground mb-4">
|
|
Buttons — Sizes
|
|
</h4>
|
|
<div className="border border-border rounded-md p-6 bg-card">
|
|
<div className="flex flex-wrap items-end gap-4">
|
|
<div className="space-y-2">
|
|
<p className="font-sans text-xs text-muted-foreground">Small</p>
|
|
<Button size="sm">Small</Button>
|
|
</div>
|
|
<div className="space-y-2">
|
|
<p className="font-sans text-xs text-muted-foreground">Default</p>
|
|
<Button size="default">Default</Button>
|
|
</div>
|
|
<div className="space-y-2">
|
|
<p className="font-sans text-xs text-muted-foreground">Large</p>
|
|
<Button size="lg">Large</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Buttons - States */}
|
|
<div>
|
|
<h4 className="font-sans text-sm font-semibold uppercase tracking-wide text-muted-foreground mb-4">
|
|
Buttons — States
|
|
</h4>
|
|
<div className="border border-border rounded-md p-6 bg-card">
|
|
<div className="space-y-6">
|
|
{/* Primary States */}
|
|
<div>
|
|
<p className="font-sans text-xs text-muted-foreground mb-3">Primary</p>
|
|
<div className="flex flex-wrap gap-3">
|
|
<Button>Default</Button>
|
|
<Button className="bg-primary/90">Hover</Button>
|
|
<Button className="bg-primary/80">Active</Button>
|
|
<Button className="ring-2 ring-ring ring-offset-2">Focus</Button>
|
|
<Button disabled>Disabled</Button>
|
|
</div>
|
|
</div>
|
|
{/* Outline States */}
|
|
<div>
|
|
<p className="font-sans text-xs text-muted-foreground mb-3">Outline</p>
|
|
<div className="flex flex-wrap gap-3">
|
|
<Button variant="outline">Default</Button>
|
|
<Button variant="outline" className="bg-accent/10">Hover</Button>
|
|
<Button variant="outline" className="ring-2 ring-ring ring-offset-2 bg-transparent">Focus</Button>
|
|
<Button variant="outline" disabled>Disabled</Button>
|
|
</div>
|
|
</div>
|
|
{/* Destructive States */}
|
|
<div>
|
|
<p className="font-sans text-xs text-muted-foreground mb-3">Destructive</p>
|
|
<div className="flex flex-wrap gap-3">
|
|
<Button variant="destructive">Default</Button>
|
|
<Button variant="destructive" className="bg-destructive/90">Hover</Button>
|
|
<Button variant="destructive" className="ring-2 ring-destructive/50 ring-offset-2">Focus</Button>
|
|
<Button variant="destructive" disabled>Disabled</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Icon Buttons */}
|
|
<div>
|
|
<h4 className="font-sans text-sm font-semibold uppercase tracking-wide text-muted-foreground mb-4">
|
|
Icon Buttons
|
|
</h4>
|
|
<div className="border border-border rounded-md p-6 bg-card">
|
|
<div className="space-y-6">
|
|
{/* By Variant */}
|
|
<div>
|
|
<p className="font-sans text-xs text-muted-foreground mb-3">Variants</p>
|
|
<div className="flex flex-wrap gap-3">
|
|
<Button size="icon"><Plus className="h-4 w-4" /></Button>
|
|
<Button variant="secondary" size="icon"><Settings className="h-4 w-4" /></Button>
|
|
<Button variant="outline" size="icon"><Search className="h-4 w-4" /></Button>
|
|
<Button variant="ghost" size="icon"><X className="h-4 w-4" /></Button>
|
|
<Button variant="destructive" size="icon"><Trash2 className="h-4 w-4" /></Button>
|
|
</div>
|
|
</div>
|
|
{/* By Size */}
|
|
<div>
|
|
<p className="font-sans text-xs text-muted-foreground mb-3">Sizes</p>
|
|
<div className="flex flex-wrap items-center gap-3">
|
|
<Button size="icon-sm" variant="outline"><Plus className="h-4 w-4" /></Button>
|
|
<Button size="icon" variant="outline"><Plus className="h-4 w-4" /></Button>
|
|
<Button size="icon-lg" variant="outline"><Plus className="h-4 w-4" /></Button>
|
|
</div>
|
|
</div>
|
|
{/* Disabled */}
|
|
<div>
|
|
<p className="font-sans text-xs text-muted-foreground mb-3">Disabled</p>
|
|
<div className="flex flex-wrap gap-3">
|
|
<Button size="icon" disabled><Plus className="h-4 w-4" /></Button>
|
|
<Button variant="outline" size="icon" disabled><Settings className="h-4 w-4" /></Button>
|
|
<Button variant="ghost" size="icon" disabled><X className="h-4 w-4" /></Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Buttons with Icons */}
|
|
<div>
|
|
<h4 className="font-sans text-sm font-semibold uppercase tracking-wide text-muted-foreground mb-4">
|
|
Buttons with Icons
|
|
</h4>
|
|
<div className="border border-border rounded-md p-6 bg-card">
|
|
<div className="space-y-6">
|
|
{/* Leading Icons */}
|
|
<div>
|
|
<p className="font-sans text-xs text-muted-foreground mb-3">Leading Icon</p>
|
|
<div className="flex flex-wrap gap-3">
|
|
<Button><Plus className="h-4 w-4" /> Create New</Button>
|
|
<Button variant="secondary"><Download className="h-4 w-4" /> Download</Button>
|
|
<Button variant="outline"><Mail className="h-4 w-4" /> Send Email</Button>
|
|
<Button variant="destructive"><Trash2 className="h-4 w-4" /> Delete</Button>
|
|
</div>
|
|
</div>
|
|
{/* Trailing Icons */}
|
|
<div>
|
|
<p className="font-sans text-xs text-muted-foreground mb-3">Trailing Icon</p>
|
|
<div className="flex flex-wrap gap-3">
|
|
<Button>Continue <ChevronRight className="h-4 w-4" /></Button>
|
|
<Button variant="outline">Next Step <ChevronRight className="h-4 w-4" /></Button>
|
|
<Button variant="secondary">Submit <Send className="h-4 w-4" /></Button>
|
|
</div>
|
|
</div>
|
|
{/* Size Variations */}
|
|
<div>
|
|
<p className="font-sans text-xs text-muted-foreground mb-3">Sizes with Icons</p>
|
|
<div className="flex flex-wrap items-center gap-3">
|
|
<Button size="sm"><Plus className="h-3.5 w-3.5" /> Small</Button>
|
|
<Button size="default"><Plus className="h-4 w-4" /> Default</Button>
|
|
<Button size="lg"><Plus className="h-5 w-5" /> Large</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Badges - Core Variants */}
|
|
<div>
|
|
<h4 className="font-sans text-sm font-semibold uppercase tracking-wide text-muted-foreground mb-4">
|
|
Badges — Core Variants
|
|
</h4>
|
|
<div className="border border-border rounded-md p-6 bg-card">
|
|
<div className="flex flex-wrap gap-3">
|
|
<Badge>Default</Badge>
|
|
<Badge variant="secondary">Secondary</Badge>
|
|
<Badge variant="muted">Muted</Badge>
|
|
<Badge variant="outline">Outline</Badge>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Badges - Tag & Value */}
|
|
<div>
|
|
<h4 className="font-sans text-sm font-semibold uppercase tracking-wide text-muted-foreground mb-4">
|
|
Badges — Tag & Value
|
|
</h4>
|
|
<div className="border border-border rounded-md p-6 bg-card">
|
|
<div className="flex flex-wrap gap-3">
|
|
<Badge variant="tag">Tag</Badge>
|
|
<Badge variant="tag">Category</Badge>
|
|
<Badge variant="value">42</Badge>
|
|
<Badge variant="value">$1,234</Badge>
|
|
<Badge variant="value">100%</Badge>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Badges - Semantic */}
|
|
<div>
|
|
<h4 className="font-sans text-sm font-semibold uppercase tracking-wide text-muted-foreground mb-4">
|
|
Badges — Semantic
|
|
</h4>
|
|
<div className="border border-border rounded-md p-6 bg-card">
|
|
<div className="flex flex-wrap gap-3">
|
|
<Badge variant="success">Success</Badge>
|
|
<Badge variant="warning">Warning</Badge>
|
|
<Badge variant="destructive">Danger</Badge>
|
|
<Badge variant="info">Info</Badge>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Badges - Channel Pills */}
|
|
<div>
|
|
<h4 className="font-sans text-sm font-semibold uppercase tracking-wide text-muted-foreground mb-4">
|
|
Badges — Channel Pills
|
|
</h4>
|
|
<div className="border border-border rounded-md p-6 bg-card">
|
|
<div className="flex flex-wrap gap-3">
|
|
<Badge variant="whatsapp">WhatsApp</Badge>
|
|
<Badge variant="email">Email</Badge>
|
|
<Badge variant="telegram">Telegram</Badge>
|
|
<Badge variant="zulip">Zulip</Badge>
|
|
<Badge variant="platform">Platform</Badge>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Badges on Muted Surface */}
|
|
<div>
|
|
<h4 className="font-sans text-sm font-semibold uppercase tracking-wide text-muted-foreground mb-4">
|
|
Badges — On Muted Surface
|
|
</h4>
|
|
<div className="border border-border rounded-md p-6 bg-muted">
|
|
<div className="flex flex-wrap gap-3">
|
|
<Badge>Default</Badge>
|
|
<Badge variant="secondary">Secondary</Badge>
|
|
<Badge variant="outline">Outline</Badge>
|
|
<Badge variant="tag">Tag</Badge>
|
|
<Badge variant="success">Success</Badge>
|
|
<Badge variant="info">Info</Badge>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Inputs */}
|
|
<div>
|
|
<h4 className="font-sans text-sm font-semibold uppercase tracking-wide text-muted-foreground mb-4">
|
|
Inputs
|
|
</h4>
|
|
<div className="border border-border rounded-md p-6 bg-card">
|
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
|
|
<div className="space-y-3">
|
|
<p className="font-sans text-xs text-muted-foreground">Default</p>
|
|
<Input placeholder="Enter your email" />
|
|
</div>
|
|
<div className="space-y-3">
|
|
<p className="font-sans text-xs text-muted-foreground">With Value</p>
|
|
<Input defaultValue="user@greyhaven.ai" />
|
|
</div>
|
|
<div className="space-y-3">
|
|
<p className="font-sans text-xs text-muted-foreground">Disabled</p>
|
|
<Input placeholder="Disabled input" disabled />
|
|
</div>
|
|
</div>
|
|
|
|
<div className="mt-6 pt-6 border-t border-border">
|
|
<p className="font-sans text-xs text-muted-foreground mb-3">Textarea</p>
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
|
<Textarea placeholder="Describe your project requirements..." />
|
|
<Textarea placeholder="Disabled textarea" disabled />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Select */}
|
|
<div>
|
|
<h4 className="font-sans text-sm font-semibold uppercase tracking-wide text-muted-foreground mb-4">
|
|
Select
|
|
</h4>
|
|
<div className="border border-border rounded-md p-6 bg-card">
|
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
|
|
<div className="space-y-3">
|
|
<p className="font-sans text-xs text-muted-foreground">Default</p>
|
|
<Select>
|
|
<SelectTrigger>
|
|
<SelectValue placeholder="Select an option" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="option1">Option 1</SelectItem>
|
|
<SelectItem value="option2">Option 2</SelectItem>
|
|
<SelectItem value="option3">Option 3</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
<div className="space-y-3">
|
|
<p className="font-sans text-xs text-muted-foreground">With Value</p>
|
|
<Select defaultValue="option2">
|
|
<SelectTrigger>
|
|
<SelectValue />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="option1">Option 1</SelectItem>
|
|
<SelectItem value="option2">Option 2</SelectItem>
|
|
<SelectItem value="option3">Option 3</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
<div className="space-y-3">
|
|
<p className="font-sans text-xs text-muted-foreground">Disabled</p>
|
|
<Select disabled>
|
|
<SelectTrigger>
|
|
<SelectValue placeholder="Disabled" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="option1">Option 1</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Checkboxes & Switches */}
|
|
<div>
|
|
<h4 className="font-sans text-sm font-semibold uppercase tracking-wide text-muted-foreground mb-4">
|
|
Checkboxes & Switches
|
|
</h4>
|
|
<div className="border border-border rounded-md p-6 bg-card">
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-8">
|
|
<div className="space-y-4">
|
|
<p className="font-sans text-xs text-muted-foreground">Checkboxes</p>
|
|
<div className="space-y-3">
|
|
<div className="flex items-center gap-2">
|
|
<Checkbox id="check1" />
|
|
<Label htmlFor="check1" className="font-sans text-sm">Unchecked</Label>
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
<Checkbox id="check2" defaultChecked />
|
|
<Label htmlFor="check2" className="font-sans text-sm">Checked</Label>
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
<Checkbox id="check3" disabled />
|
|
<Label htmlFor="check3" className="font-sans text-sm text-muted-foreground">Disabled</Label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="space-y-4">
|
|
<p className="font-sans text-xs text-muted-foreground">Switches</p>
|
|
<div className="space-y-3">
|
|
<div className="flex items-center gap-2">
|
|
<Switch id="switch1" />
|
|
<Label htmlFor="switch1" className="font-sans text-sm">Off</Label>
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
<Switch id="switch2" defaultChecked />
|
|
<Label htmlFor="switch2" className="font-sans text-sm">On</Label>
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
<Switch id="switch3" disabled />
|
|
<Label htmlFor="switch3" className="font-sans text-sm text-muted-foreground">Disabled</Label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Tabs */}
|
|
<div>
|
|
<h4 className="font-sans text-sm font-semibold uppercase tracking-wide text-muted-foreground mb-4">
|
|
Tabs
|
|
</h4>
|
|
<div className="border border-border rounded-md p-6 bg-card">
|
|
<Tabs defaultValue="overview" className="w-full">
|
|
<TabsList>
|
|
<TabsTrigger value="overview">Overview</TabsTrigger>
|
|
<TabsTrigger value="analytics">Analytics</TabsTrigger>
|
|
<TabsTrigger value="settings">Settings</TabsTrigger>
|
|
<TabsTrigger value="disabled" disabled>Disabled</TabsTrigger>
|
|
</TabsList>
|
|
<TabsContent value="overview" className="mt-4">
|
|
<p className="font-serif text-muted-foreground">
|
|
Overview content. This tab demonstrates the default active state.
|
|
</p>
|
|
</TabsContent>
|
|
<TabsContent value="analytics" className="mt-4">
|
|
<p className="font-serif text-muted-foreground">
|
|
Analytics content. System metrics and performance data.
|
|
</p>
|
|
</TabsContent>
|
|
<TabsContent value="settings" className="mt-4">
|
|
<p className="font-serif text-muted-foreground">
|
|
Settings content. Configuration options for your deployment.
|
|
</p>
|
|
</TabsContent>
|
|
</Tabs>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Tooltips */}
|
|
<div>
|
|
<h4 className="font-sans text-sm font-semibold uppercase tracking-wide text-muted-foreground mb-4">
|
|
Tooltips
|
|
</h4>
|
|
<div className="border border-border rounded-md p-6 bg-card">
|
|
<div className="flex gap-4">
|
|
<Tooltip>
|
|
<TooltipTrigger asChild>
|
|
<Button variant="outline">Hover me</Button>
|
|
</TooltipTrigger>
|
|
<TooltipContent>
|
|
<p className="font-sans text-sm">This is a tooltip</p>
|
|
</TooltipContent>
|
|
</Tooltip>
|
|
|
|
<Tooltip>
|
|
<TooltipTrigger asChild>
|
|
<Button variant="secondary">More info</Button>
|
|
</TooltipTrigger>
|
|
<TooltipContent>
|
|
<p className="font-sans text-sm">Additional information appears here</p>
|
|
</TooltipContent>
|
|
</Tooltip>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</TooltipProvider>
|
|
)
|
|
}
|