提示 Alert

import { Alert } from "@/components/ui/alert"

export function AlertBasicStyles() {
  return (
    <div className="grid gap-4" style={{ width: 360, marginInline: "auto" }}>
      <Alert variant="info" title="信息提示">文档已同步到本地库。</Alert>
      <Alert variant="success" title="保存成功">更改已写入 note.md。</Alert>
      <Alert variant="warning" title="存储空间不足">本地缓存即将达到上限。</Alert>
      <Alert variant="error" title="同步失败">网络中断，稍后将自动重试。</Alert>
    </div>
  )
}

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

export function AlertStyleVariants() {
  return (
    <div className="grid gap-4" style={{ width: 360, marginInline: "auto" }}>
      <Alert title="已保存到草稿">几秒后会自动收起；持久提示请改用可关闭或带操作。</Alert>

      <Alert icon={false} title="静默提示">
        无图标时更适合紧凑反馈。
      </Alert>

      <Alert title="发现新版本" closable>
        当前 1.0.0，可升级到 2.0.0。升级前请先阅读变更日志。
      </Alert>

      <Alert
        variant="warning"
        title="权限不足"
        action={<Button variant="brand" size="sm">申请权限</Button>}
      >
        你对当前空间只有阅读权限，编辑需要管理员开通。
      </Alert>

      <Alert
        variant="warning"
        title="覆盖本地更改？"
        action={
          <>
            <Button variant="outline" size="sm">取消</Button>
            <Button variant="brand" size="sm">覆盖</Button>
          </>
        }
      >
        远程已有更新版本，继续将丢弃未提交的本地修改。
      </Alert>

      <Alert
        variant="warning"
        title="存储空间不足"
        action={
          <>
            <Button variant="link" size="sm" className="h-auto px-0 text-muted-foreground">
              稍后
            </Button>
            <Button variant="link" size="sm" className="h-auto px-0 text-[var(--color-action-primary)]">
              清理缓存
            </Button>
          </>
        }
      >
        本地缓存即将达到上限。
      </Alert>
    </div>
  )
}