howl/src/divider.tsx

import { define } from 'forge'
import { theme } from './theme'
import { Section } from './section'
import { H2 } from './text'
import { VStack } from './stack'

export const Divider = define('Divider', {
  display: 'flex',
  alignItems: 'center',
  margin: `${theme('spacing-4')} 0`,

  parts: {
    Line: {
      flex: 1,
      borderTop: `1px solid ${theme('colors-border')}`,
    },
    Text: {
      base: 'span',
      padding: `0 ${theme('spacing-3')}`,
      fontSize: theme('fontSize-sm'),
      color: theme('colors-fgMuted'),
      background: theme('colors-bg'),
    },
  },

  render({ props, parts: { Root, Line, Text } }) {
    const { children, ...rest } = props

    return (
      <Root {...rest}>
        <Line />
        {children && (
          <>
            <Text>{children}</Text>
            <Line />
          </>
        )}
      </Root>
    )
  },
})

export const Test = () => {
  return (
    <Section gap={4} style={{ maxWidth: '448px', padding: '16px' }}>
      <H2>Divider Examples</H2>

      <VStack gap={0}>
        <p>Would you like to continue</p>
        <Divider>OR WOULD YOU LIKE TO</Divider>
        <p>Submit to certain death</p>
      </VStack>

      {/* Just a line */}
      <VStack gap={0}>
        <p>Look a line</p>
        <Divider />
        <p>So cool, so straight!</p>
      </VStack>
    </Section>
  )
}