Card

import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from '@caroainc/ui-components'

<Card>
  <CardHeader>
    <CardTitle>カードタイトル</CardTitle>
    <CardDescription>カードの説明文がここに入ります。</CardDescription>
  </CardHeader>
  <CardContent>
    <p>カードのメインコンテンツ</p>
  </CardContent>
  <CardFooter>
    <Button>アクション</Button>
  </CardFooter>
</Card>

<Card className="p-6">
  <p>シンプルなカードコンテンツ</p>
</Card>

<Card className="w-[380px]">
  <CardHeader>
    <CardTitle>ログイン</CardTitle>
    <CardDescription>アカウントにログインしてください</CardDescription>
  </CardHeader>
  <CardContent className="space-y-4">
    <div className="space-y-2">
      <Label htmlFor="email">メールアドレス</Label>
      <Input id="email" type="email" placeholder="[email protected]" />
    </div>
    <div className="space-y-2">
      <Label htmlFor="password">パスワード</Label>
      <Input id="password" type="password" />
    </div>
  </CardContent>
  <CardFooter className="flex justify-between">
    <Button variant="outline">キャンセル</Button>
    <Button variant="primary">ログイン</Button>
  </CardFooter>
</Card>

<Card>
  <CardContent className="p-6">
    <div className="flex items-center justify-between">
      <div>
        <p className="text-sm text-muted-foreground">総売上</p>
        <p className="text-2xl font-bold">¥1,234,567</p>
      </div>
      <Icon name="TrendingUp" className="text-success" size="lg" />
    </div>
  </CardContent>
</Card>

<Card>
  <CardHeader className="flex flex-row items-center gap-4">
    <Avatar>
      <AvatarFallback>JD</AvatarFallback>
    </Avatar>
    <div>
      <CardTitle>John Doe</CardTitle>
      <CardDescription>[email protected]</CardDescription>
    </div>
  </CardHeader>
  <CardContent>
    {/* ... */}
  </CardContent>
  <CardFooter>
    <Button variant="outline" className="w-full">プロフィールを編集</Button>
  </CardFooter>
</Card>