howl/src/section.tsx

import "hono/jsx"
import type { FC, PropsWithChildren, JSX } from "hono/jsx"
import { VStack } from "./stack"
import type { TailwindSize } from "./types"
import { CodeExamples } from "./code"

type SectionProps = JSX.IntrinsicElements["div"] & PropsWithChildren & {
  gap?: TailwindSize
  maxWidth?: string
}

export const Section: FC<SectionProps> = (props) => {
  const { children, gap = 8, maxWidth, class: className, style, id, ref, ...rest } = props

  return (
    <VStack gap={gap} class={className} style={{ padding: "24px", maxWidth, ...(style as JSX.CSSProperties) }} id={id} ref={ref} {...rest}>
      {children}
    </VStack>
  )
}

export const Test = () => {
  return (
    <div>
      {/* API Usage Examples */}
      <div style={{ margin: "24px" }}>
        <CodeExamples
          examples={[
            '<Section>...</Section>',
            '<Section gap={4}>...</Section>',
            '<Section maxWidth="600px">...</Section>',
            '<Section style={{ backgroundColor: "#f3f4f6" }}>...</Section>',
          ]}
        />
      </div>

      <Section>
        <h2 style={{ fontSize: "20px", fontWeight: "bold" }}>Default Section</h2>
        <p>This is a section with default gap (8)</p>
        <p>It has padding and vertical spacing between children</p>
      </Section>

      <Section gap={4}>
        <h2 style={{ fontSize: "20px", fontWeight: "bold" }}>Compact Section</h2>
        <p>This section has a smaller gap (4)</p>
        <p>Items are closer together</p>
      </Section>

      <Section gap={12}>
        <h2 style={{ fontSize: "20px", fontWeight: "bold" }}>Spacious Section</h2>
        <p>This section has a larger gap (12)</p>
        <p>Items have more breathing room</p>
      </Section>

      <Section maxWidth="600px" style={{ backgroundColor: "#f3f4f6" }}>
        <h2 style={{ fontSize: "20px", fontWeight: "bold" }}>Constrained Width Section</h2>
        <p>This section has a max width of 600px and a gray background</p>
        <p>Good for centering content on wide screens</p>
      </Section>
    </div>
  )
}