howl/src/divider.tsx

import { Section } from "./section"
import { H2 } from "./text"
import "hono/jsx"
import type { FC, PropsWithChildren, JSX } from "hono/jsx"
import { VStack } from "./stack"
import { CodeExamples } from "./code"
import { cn } from "./cn"

type DividerProps = PropsWithChildren & {
  class?: string
  style?: JSX.CSSProperties
  id?: string
  ref?: any
}

export const Divider: FC<DividerProps> = ({ children, class: className, style, id, ref }) => {
  const containerStyle: JSX.CSSProperties = {
    display: "flex",
    alignItems: "center",
    margin: "16px 0",
    ...style,
  }

  const lineStyle: JSX.CSSProperties = {
    flex: 1,
    borderTop: "1px solid #d1d5db",
  }

  const textStyle: JSX.CSSProperties = {
    padding: "0 12px",
    fontSize: "14px",
    color: "#6b7280",
    backgroundColor: "#ffffff",
  }

  return (
    <div class={cn("Divider", className)} style={containerStyle} id={id} ref={ref}>
      <div style={lineStyle}></div>
      {children && (
        <>
          <span style={textStyle}>{children}</span>
          <div style={lineStyle}></div>
        </>
      )}
    </div>
  )
}

export const Test = () => {
  return (
    <Section gap={4} maxWidth="448px" style={{ padding: "16px" }}>
      {/* API Usage Examples */}
      <CodeExamples
        examples={[
          '<Divider />',
          '<Divider>OR</Divider>',
          '<Divider style={{ margin: "24px 0" }} />',
        ]}
      />

      <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>
  )
}