Alert

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

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

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

<Alert>
  <AlertTitle>デフォルト</AlertTitle>
  <AlertDescription>デフォルトのアラートです。</AlertDescription>
</Alert>
 
<Alert variant="success">
  <AlertTitle>成功</AlertTitle>
  <AlertDescription>保存が完了しました。</AlertDescription>
</Alert>
 
<Alert variant="warning">
  <AlertTitle>警告</AlertTitle>
  <AlertDescription>この操作には注意が必要です。</AlertDescription>
</Alert>
 
<Alert variant="info">
  <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>

function DismissibleAlert() {
  const [open, setOpen] = useState(true)
  if (!open) return null
 
  return (
    <Alert onClose={() => setOpen(false)}>
      <AlertTitle>お知らせ</AlertTitle>
      <AlertDescription>このアラートは閉じるボタン付きです。</AlertDescription>
    </Alert>
  )
}