Section Divider

import { Ground } from '@fairgarden-private/design/components/Ground'
import { SectionDivider } from '@fairgarden-private/design/components/SectionDivider'
import styles from './seams.module.css'

/**
 * paper → paper → tide → white. Each band pads its block edges with
 * --ds-space-section, and each seam divider is the lower band's first child.
 */
export function SectionDividerSeams() {
  return (
    <div className={styles.page}>
      <Ground kind="band" preset="paper" className={styles.band}>
        <div className={styles.container}>
          <p className={styles.head}>Paper</p>
          <p className={styles.text}>A long run of reading ends here.</p>
          <SectionDivider kind="pause" className={styles.pause} />
          <p className={styles.text}>The pause breaks it once, then the text resumes.</p>
        </div>
      </Ground>
      <Ground kind="band" preset="paper" className={styles.band}>
        <SectionDivider kind="seam" />
        <div className={styles.container}>
          <p className={styles.head}>Paper again: the seam rule</p>
        </div>
      </Ground>
      <Ground kind="band" preset="tide" className={styles.band}>
        <SectionDivider kind="page-seam" />
        <div className={styles.container}>
          <p className={styles.head}>Tide: the page-seam hairline</p>
          <SectionDivider kind="pause" ornament="dot" className={styles.pause} />
        </div>
      </Ground>
      <Ground kind="band" preset="white" className={styles.band}>
        <SectionDivider kind="page-seam" />
        <div className={styles.container}>
          <p className={styles.head}>White: the terminal band</p>
          <SectionDivider kind="pause" ornament="star" className={styles.pause} />
        </div>
      </Ground>
    </div>
  )
}

import { Ground } from '@fairgarden-private/design/components/Ground'
import { SectionDivider } from '@fairgarden-private/design/components/SectionDivider'
import styles from './hill.module.css'

/**
 * The night media hero, then the paper band with the hill as its first
 * child. Switch the page to dark mode: the curve drops for the night band's
 * straight --primary12 seam.
 */
export function SectionDividerHill() {
  return (
    <div className={styles.page}>
      <Ground kind="band" preset="night" className={styles.night}>
        <div className={styles.container}>
          <p className={styles.head}>Night: the media hero</p>
          <p className={styles.text}>At least --size-px-10 of empty ground above the hill.</p>
        </div>
      </Ground>
      <Ground kind="band" preset="paper" className={styles.band}>
        <SectionDivider kind="hill" />
        <div className={styles.container}>
          <p className={styles.head}>Paper rises into it</p>
          <p className={styles.text}>The curve is 4.6% of the width, clamped 12–64 px.</p>
        </div>
      </Ground>
    </div>
  )
}

import { Ground } from '@fairgarden-private/design/components/Ground'
import { SectionDivider } from '@fairgarden-private/design/components/SectionDivider'
import styles from './fringe.module.css'

/**
 * The fringe on the night footer's top edge, in the night band's ink. A page
 * carries one shaped edge; this demo shows the footer placement alone.
 */
export function SectionDividerFringe() {
  return (
    <div className={styles.page}>
      <Ground kind="band" preset="paper" className={styles.band}>
        <div className={styles.container}>
          <p className={styles.head}>Paper</p>
          <p className={styles.text}>The last page-ground band before the footer.</p>
        </div>
      </Ground>
      <Ground kind="band" preset="night" render={<footer />} className={styles.band}>
        <SectionDivider kind="fringe" />
        <div className={styles.container}>
          <p className={styles.head}>Night: the footer</p>
          <p className={styles.text}>Ticks hang from its top edge in light mode only.</p>
        </div>
      </Ground>
    </div>
  )
}