Alert

import { Alert } from "@nili/ui"

export function Example() {
  return (
    <>
      <Alert status="error" title="Something went wrong." />
      <Alert status="warning" title="Your trial ends in 3 days." />
      <Alert status="success" title="Payment received." />
      <Alert status="info" title="A new version is available." />
      <Alert status="feature" title="Try the new dashboard." />
    </>
  )
}

import { Alert } from "@nili/ui"

export function Example() {
  return (
    <>
      <Alert appearance="filled" status="info" title="Filled" />
      <Alert appearance="light" status="info" title="Light" />
      <Alert appearance="lighter" status="info" title="Lighter" />
      <Alert appearance="stroke" status="info" title="Stroke" />
    </>
  )
}

import { Alert } from "@nili/ui"

export function Example() {
  return (
    <>
      <Alert size="x-small" status="success" title="Saved." />
      <Alert size="small" status="success" title="Saved." />
      <Alert
        size="large"
        status="success"
        title="Saved."
        description="Your changes are live for everyone on the team."
      />
    </>
  )
}

import { Alert, Icon } from "@nili/ui"
import { RiSparkling2Line } from "@remixicon/react"

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

  return (
    <>
      <Alert
        status="warning"
        appearance="stroke"
        size="large"
        title={t('actions.planTitle')}
        description={t('actions.planBody')}
        actions={[
          { label: "Upgrade", href: "#" },
          { label: "Dismiss", onClick: () => setOpen(false) },
        ]}
        dismissible
        dismissLabel={t('close')}
        onDismiss={() => setOpen(false)}
      />

      {/* Custom icon */}
      <Alert
        status="feature"
        title={t('actions.feature')}
        icon={<Icon icon={RiSparkling2Line} />}
      />

      {/* No icon */}
      <Alert status="info" title="No icon." icon={false} />
    </>
  )
}