ContentDivider

import { ContentDivider } from "@nili/ui"

export function Example() {
  return (
    <>
      <ContentDivider type="line" />
      <ContentDivider type="line-spacing" />

      {/* the same thing, spelled as the axis */}
      <ContentDivider spacing="none" />
      <ContentDivider spacing="md" />
    </>
  )
}

import { ContentDivider } from "@nili/ui"

export function Example() {
  return (
    <>
      <ContentDivider type="text-and-line">{t('text.or')}</ContentDivider>
      <ContentDivider type="text">{t('text.today')}</ContentDivider>
      <ContentDivider type="solid-text">
              {t('text.newMessages')}
            </ContentDivider>
    </>
  )
}

import { ContentDivider } from "@nili/ui"

export function Example() {
  return (
    <>
      <ContentDivider align="start" spacing="sm">Start</ContentDivider>
      <ContentDivider align="center" spacing="sm">Center</ContentDivider>
      <ContentDivider align="end" spacing="sm">End</ContentDivider>
    </>
  )
}

import { ContentDivider, Button, CompactButton, Icon } from "@nili/ui"
import { RiAddLine, RiMore2Fill } from "@remixicon/react"

export function Example() {
  return (
    <>
      <ContentDivider type="icon-button">
        <CompactButton
                  appearance="stroke"
                  fullRadius
                  aria-label={t('controls.add')}
                >
          <Icon icon={RiAddLine} />
        </CompactButton>
      </ContentDivider>

      <ContentDivider type="text-button">
        <Button size="2xs" appearance="stroke">Show more</Button>
      </ContentDivider>
    </>
  )
}

import { ContentDivider } from "@nili/ui"

export function Example() {
  return (
    <div className="flex h-10 items-center gap-3">
      <span>{t('vertical.open')}</span>
      <ContentDivider orientation="vertical" />
      <span>{t('vertical.closed')}</span>
      <ContentDivider orientation="vertical" />
      <span>{t('vertical.draft')}</span>
    </div>
  )
}