Separator

import { css } from 'remix/component'

import { Separator } from '#app/ui/separator.tsx'

export function SeparatorDemo() {
  return () => (

import { css } from 'remix/component'

import { Separator } from '#app/ui/separator.tsx'

export function SeparatorDemo() {
  return () => (
    <div>
      <div mix={css({ '& > :not(:last-child)': { marginBottom: '0.25rem' } })}>
        <h4 mix={css({ fontSize: '0.875rem', lineHeight: 1, fontWeight: 500 })}>Radix Primitives</h4>
        <p
          mix={css({
            fontSize: '0.875rem',
            lineHeight: 'calc(1.25 / 0.875)',
            color: 'var(--muted-foreground)',
          })}
        >
          An open-source UI component library.
        </p>
      </div>
      <Separator mix={css({ marginBlock: '1rem' })} />
      <div
        mix={css({
          display: 'flex',
          height: '1.25rem',
          alignItems: 'center',
          fontSize: '0.875rem',
          lineHeight: 'calc(1.25 / 0.875)',
          '& > :not(:last-child)': { marginInlineEnd: '1rem' },
        })}
      >
        <div>Blog</div>
        <Separator orientation="vertical" />
        <div>Docs</div>
        <Separator orientation="vertical" />
        <div>Source</div>
      </div>
    </div>
  )
}