Collapsible

import {
  Collapsible,
  CollapsiblePanel,
  CollapsibleTrigger,
} from '@fairgarden-private/design/components/Collapsible'
import styles from './variants.module.css'

const preserves = ['Bluestem Prairie', 'Heron Marsh', 'Oak Hollow', 'Cedar Bluff']
const more = ['Fox Run', 'Willow Bend', 'Kettle Pond', 'Sandhill Flats']

/** "Show more" with a swapped open label, and a disabled trigger. */
export function CollapsibleVariants() {
  return (
    <div className={styles.stack}>
      <Collapsible>
        <ul className={styles.list}>
          {preserves.map((name) => (
            <li key={name}>{name}</li>
          ))}
        </ul>
        <CollapsiblePanel>
          <ul className={styles.list}>
            {more.map((name) => (
              <li key={name}>{name}</li>
            ))}
          </ul>
        </CollapsiblePanel>
        <CollapsibleTrigger openLabel="Show less">Show {more.length} more</CollapsibleTrigger>
      </Collapsible>

      <Collapsible defaultOpen>
        <CollapsibleTrigger>Deed restrictions</CollapsibleTrigger>
        <CollapsiblePanel>
          <p className={styles.copy}>No subdivision, no new structures, and no removal of native trees.</p>
        </CollapsiblePanel>
      </Collapsible>

      <Collapsible disabled>
        <CollapsibleTrigger>Survey records (unavailable)</CollapsibleTrigger>
        <CollapsiblePanel>
          <p className={styles.copy}>Not shown.</p>
        </CollapsiblePanel>
      </Collapsible>
    </div>
  )
}

import {
  Collapsible,
  CollapsiblePanel,
  CollapsibleTrigger,
} from '@fairgarden-private/design/components/Collapsible'
import styles from './color.module.css'

/** `primary` drives the label, glyph and panel text. */
export function CollapsibleColor() {
  return (
    <div className={styles.row}>
      <Collapsible primary="plum">
        <CollapsibleTrigger openLabel="Hide details">Show details</CollapsibleTrigger>
        <CollapsiblePanel>
          <p className={styles.copy}>Primary plum.</p>
        </CollapsiblePanel>
      </Collapsible>
      <Collapsible primary="bronze" defaultOpen>
        <CollapsibleTrigger openLabel="Hide details">Show details</CollapsibleTrigger>
        <CollapsiblePanel>
          <p className={styles.copy}>Primary bronze, open.</p>
        </CollapsiblePanel>
      </Collapsible>
    </div>
  )
}

import {
  Collapsible,
  CollapsiblePanel,
  CollapsibleTrigger,
} from '@fairgarden-private/design/components/Collapsible'
import { PresetGround } from '@/components/PresetGround'
import styles from './grounds.module.css'

const presets = ['paper', 'forest'] as const

/** The glyph steps from muted to the text ink on paper; on forest both states are the one ink. */
export function CollapsibleGrounds() {
  return (
    <div className={styles.row}>
      {presets.map((preset) => (
        <PresetGround key={preset} preset={preset} className={styles.face}>
          <p className={styles.name}>{preset}</p>
          <Collapsible>
            <CollapsibleTrigger openLabel="Show less">Show 3 more</CollapsibleTrigger>
            <CollapsiblePanel>
              <p className={styles.copy}>Fox Run, Willow Bend, Kettle Pond.</p>
            </CollapsiblePanel>
          </Collapsible>
        </PresetGround>
      ))}
    </div>
  )
}