Cách Mình Thiết Kế Giao Diện

┌─────────────────────────────────────────┐
│           Design Tokens                  │
│  Colors, Typography, Spacing, Shadows    │
├─────────────────────────────────────────┤
│           Base Components                │
│  Button, Input, Card, Dialog (Shadcn)    │
├─────────────────────────────────────────┤
│         Pattern Components               │
│  DataTable, FormSection, PageHeader      │
├─────────────────────────────────────────┤
│             Pages                        │
│  Dashboard, Settings, Results            │
└─────────────────────────────────────────┘

/* System fonts mặc định, ưu tiên performance */
font-family: ui-sans-serif, system-ui, sans-serif;

/* Monospace cho code */
font-family: ui-monospace, monospace;

// Action chính
<Button>Save Changes</Button>

// Action phụ
<Button variant="secondary">Cancel</Button>

// Action nguy hiểm
<Button variant="destructive">Delete</Button>

// Action ghost/subtle
<Button variant="ghost">Learn More</Button>

// Với loading state
<Button disabled>
  <Loader2 className="mr-2 h-4 w-4 animate-spin" />
  Saving...
</Button>

<form className="space-y-4">
  <div className="space-y-2">
    <Label htmlFor="name">Name</Label>
    <Input id="name" placeholder="Enter name" />
  </div>

  <div className="space-y-2">
    <Label htmlFor="email">Email</Label>
    <Input id="email" type="email" />
    <p className="text-sm text-muted-foreground">
      Mình sẽ không chia sẻ email của bạn.
    </p>
  </div>

  <Button type="submit">Submit</Button>
</form>

<Card>
  <CardHeader>
    <CardTitle>Card Title</CardTitle>
    <CardDescription>Mô tả ngắn</CardDescription>
  </CardHeader>
  <CardContent>
    {/* Nội dung chính */}
  </CardContent>
  <CardFooter>
    <Button>Action</Button>
  </CardFooter>
</Card>

<Table>
  <TableHeader>
    <TableRow>
      <TableHead>Name</TableHead>
      <TableHead>Status</TableHead>
      <TableHead className="text-right">Actions</TableHead>
    </TableRow>
  </TableHeader>
  <TableBody>
    <TableRow>
      <TableCell>Item name</TableCell>
      <TableCell>
        <Badge variant="success">Active</Badge>
      </TableCell>
      <TableCell className="text-right">
        <Button variant="ghost" size="sm">Edit</Button>
      </TableCell>
    </TableRow>
  </TableBody>
</Table>

<div className="container mx-auto p-8">
  {/* Header trang */}
  <div className="mb-8">
    <h1 className="text-3xl font-bold">Page Title</h1>
    <p className="text-muted-foreground">Mô tả trang</p>
  </div>

  {/* Nội dung chính */}
  <div className="grid gap-6">
    {/* Các sections */}
  </div>
</div>

<div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
  <Card>{/* Metric 1 */}</Card>
  <Card>{/* Metric 2 */}</Card>
  <Card>{/* Metric 3 */}</Card>
</div>