Banner

import { Banner } from "@nili/ui"

export function Example() {
  return (
    <>
      <Banner status="error" title="Payment failed." />
      <Banner status="warning" title={t('content.maintenance')} />
      <Banner status="success" title={t('content.verified')} />
      <Banner status="info" title="We updated our terms." />
      <Banner status="feature" title={t('content.feature')} />
    </>
  )
}

import { Banner } from "@nili/ui"

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

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

export function Example() {
  const [open, setOpen] = useState(true)
  if (!open) return null

  return (
    <Banner
      status="feature"
      appearance="light"
      title="Smart filters are here."
      description="Save a filter set and reuse it everywhere."
      icon={<Icon icon={RiSparkling2Line} />}
      action={{ label: "Take a look", href: "#" }}
      dismissible
      dismissLabel={t('close')}
      onDismiss={() => setOpen(false)}
    />
  )
}

import { Banner } from "@nili/ui"

export function Example() {
  return (
    <Banner
      sticky
      status="info"
      title={t('sticky.archive')}
    />
  )
}