Alert 消息条

import { Alert, Stack } from '@hina-ui/react'

export default function Demo() {
  return (
    <Stack className="w-full max-w-xl">
      <Alert>已保存到草稿箱。</Alert>
      <Alert tone="accent">新版本已经可用，刷新页面即可体验。</Alert>
      <Alert tone="info">本页内容来自用户投稿，尚未经过审核。</Alert>
      <Alert tone="success">文章已发布。</Alert>
      <Alert tone="warning">登录状态即将过期，请尽快保存。</Alert>
      <Alert tone="danger">发布失败，请稍后重试。</Alert>
      <Alert tone="success" icon={false}>
        文章已发布。
      </Alert>
    </Stack>
  )
}

import { Sparkles } from 'lucide-react'
import { Alert } from '@hina-ui/react'

export default function Demo() {
  return (
    <Alert
      tone="accent"
      className="w-full max-w-xl"
      icon={<Sparkles className="text-accent-text mt-0.5 size-5 shrink-0" />}
    >
      新版本已经可用，刷新页面即可体验。
    </Alert>
  )
}

import { Alert } from '@hina-ui/react'

export default function Demo() {
  return (
    <Alert tone="warning" title="登录状态即将过期" className="w-full max-w-xl">
      请在五分钟内保存正在编辑的内容，否则需要重新登录。
    </Alert>
  )
}

'use client'

import { useState } from 'react'
import { Alert, Button, Stack } from '@hina-ui/react'

export default function Demo() {
  const [open, setOpen] = useState(true)

  return (
    <Stack className="min-h-28 w-full max-w-xl">
      <Alert open={open} onOpenChange={setOpen} tone="success" closable>
        文章已发布。
      </Alert>
      <Button
        variant="soft"
        tone="neutral"
        disabled={open}
        className="self-start"
        onClick={() => setOpen(true)}
      >
        再次显示
      </Button>
    </Stack>
  )
}

import { Alert, Button } from '@hina-ui/react'

export default function Demo() {
  return (
    <Alert
      tone="info"
      title="有新的评论"
      className="w-full max-w-xl"
      actions={
        <>
          <Button size="sm" variant="soft" tone="neutral">
            稍后
          </Button>
          <Button size="sm">查看</Button>
        </>
      }
    >
      你的文章收到了 3 条新评论。
    </Alert>
  )
}