Design System

import { Button } from "@/components/ui/button"

<Button variant="primary" size="md">送信</Button>

import { Button } from "@/components/ui/button"

<Button variant="ghost" size="icon">検索</Button>

import { LinkButton } from "@/components/client/LinkButton"

<LinkButton href="/about" variant="primary">詳細</LinkButton>

import { Card, CardHeader, CardContent, CardFooter } from "@/components/ui/card"

<Card>
  <CardHeader>タイトル</CardHeader>
  <CardContent>内容</CardContent>
</Card>

import { Dialog, DialogTrigger, DialogContent } from "@/components/ui/dialog"

<Dialog>
  <DialogTrigger>開く</DialogTrigger>
  <DialogContent>モーダル内容</DialogContent>
</Dialog>

import { Sheet, SheetTrigger, SheetContent } from "@/components/ui/sheet"

<Sheet>
  <SheetTrigger>開く</SheetTrigger>
  <SheetContent>パネル内容</SheetContent>
</Sheet>

import { Accordion, AccordionGroup } from "@/components/sia/Accordion"

<AccordionGroup>
  <Accordion label="セクション1">内容1</Accordion>
  <Accordion label="セクション2">内容2</Accordion>
</AccordionGroup>

import { Header } from "@/components/mirror/Header"

<Header />

import { Breadcrumbs } from "@/components/mirror/Breadcrumbs"

<Breadcrumbs items={[
  { label: "ホーム", href: "/" },
  { label: "設計", href: "/design" },
  { label: "現在のページ" }
]} />

import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs"

<Tabs defaultValue="tab1">
  <TabsList>
    <TabsTrigger value="tab1">タブ1</TabsTrigger>
    <TabsTrigger value="tab2">タブ2</TabsTrigger>
  </TabsList>
  <TabsContent value="tab1">内容1</TabsContent>
</Tabs>

import { SubNavigation } from "@/components/mirror/SubNavigation"

<SubNavigation items={[
  { label: "概要", href: "/overview" },
  { label: "詳細", href: "/detail" }
]} />

import { Footer } from "@/components/mirror/Footer"

<Footer />

import { Badge } from "@/components/ui/badge"

<Badge variant="default">ラベル</Badge>

import { Table } from "@/components/sia/Table"

<Table
  headers={["名前", "値"]}
  rows={[
    ["色", "gray-900"],
    ["間隔", "16px"]
  ]}
/>

import { List } from "@/components/sia/List"

<List items={["項目1", "項目2", "項目3"]} ordered={false} />

import { Avatar } from "@/components/ui/avatar"

<Avatar src="/avatar.png" alt="ユーザー名" size="md" />

import { Tooltip, TooltipTrigger, TooltipContent } from "@/components/ui/tooltip"

<Tooltip>
  <TooltipTrigger>ホバー</TooltipTrigger>
  <TooltipContent>補足情報</TooltipContent>
</Tooltip>

import { ErrorDisplay } from "@/components/mirror/ErrorDisplay"

<ErrorDisplay message="データがありません" />

import { toast } from "@/components/ui/toast"

toast({ title: "保存しました", duration: 3000 })

import { Progress } from "@/components/ui/progress"

<Progress value={60} max={100} />

import { LoadingSpinner } from "@/components/mirror/LoadingSpinner"

<LoadingSpinner />

import { Input } from "@/components/ui/input"

<Input
  type="text"
  placeholder="名前を入力"
  size="md"
/>

import { Select, SelectTrigger, SelectContent, SelectItem } from "@/components/ui/select"

<Select>
  <SelectTrigger>選択</SelectTrigger>
  <SelectContent>
    <SelectItem value="a">オプションA</SelectItem>
  </SelectContent>
</Select>

import { Checkbox } from "@/components/ui/checkbox"

<Checkbox id="agree" label="同意する" />

import { RadioGroup, RadioItem } from "@/components/ui/radio"

<RadioGroup>
  <RadioItem value="a" label="オプションA" />
  <RadioItem value="b" label="オプションB" />
</RadioGroup>

import { Switch } from "@/components/ui/switch"

<Switch id="notify" label="通知を有効にする" />

import { Slider } from "@/components/ui/slider"

<Slider min={0} max={100} step={1} defaultValue={[50]} />

import { PageLayout } from "@/components/mirror/PageLayout"

<PageLayout>ページコンテンツ</PageLayout>

// CSS flex-direction: column

<div className="flex flex-col gap-4">
  <div>Item 1</div>
  <div>Item 2</div>
</div>

// CSS flex-wrap: wrap

<div className="flex flex-wrap gap-2">
  <Badge>Tag 1</Badge>
  <Badge>Tag 2</Badge>
</div>

// CSS Grid

<div style={{
  display: "grid",
  gridTemplateColumns: "repeat(auto-fit, minmax(280px, 1fr))",
  gap: 24
}}>
  <Card />
  <Card />
</div>