Alert

import { Alert, AlertTitle, AlertDescription } from '@caroainc/ui-components'

<Alert>
  <AlertTitle>お知らせ</AlertTitle>
  <AlertDescription>
    重要なお知らせの内容がここに入ります。
  </AlertDescription>
</Alert>

<Alert>
  <AlertTitle>デフォルト</AlertTitle>
  <AlertDescription>デフォルトのアラートです。</AlertDescription>
</Alert>
 
<Alert variant="destructive">
  <AlertTitle>エラー</AlertTitle>
  <AlertDescription>エラーが発生しました。</AlertDescription>
</Alert>

<Alert>
  <Icon name="Info" size="sm" />
  <AlertTitle>お知らせ</AlertTitle>
  <AlertDescription>システムメンテナンスのお知らせです。</AlertDescription>
</Alert>
 
<Alert variant="destructive">
  <Icon name="AlertCircle" size="sm" />
  <AlertTitle>エラー</AlertTitle>
  <AlertDescription>入力内容に問題があります。</AlertDescription>
</Alert>

{/* 成功アラート */}
<Alert className="border-success/50 bg-success-light text-success [&>svg]:text-success">
  <Icon name="CheckCircle" size="sm" />
  <AlertTitle>成功</AlertTitle>
  <AlertDescription>変更が正常に保存されました。</AlertDescription>
</Alert>
 
{/* 警告アラート */}
<Alert className="border-warning/50 bg-warning-light text-warning [&>svg]:text-warning">
  <Icon name="AlertTriangle" size="sm" />
  <AlertTitle>警告</AlertTitle>
  <AlertDescription>この操作は取り消せません。</AlertDescription>
</Alert>
 
{/* 情報アラート */}
<Alert className="border-info/50 bg-info-light text-info [&>svg]:text-info">
  <Icon name="Info" size="sm" />
  <AlertTitle>情報</AlertTitle>
  <AlertDescription>新機能が追加されました。</AlertDescription>
</Alert>