Feature Grid

import {
  FeatureGrid,
  FeatureGridBody,
  FeatureGridCell,
  FeatureGridHeading,
  FeatureGridIcon,
  FeatureGridLink,
  FeatureGridList,
} from '@fairgarden-private/design/components/FeatureGrid'
import { Icon } from '@fairgarden-private/design/components/Icon'
import styles from './kinds.module.css'

const ways = [
  { icon: 'search', title: 'Find a trail', body: 'Search 40 preserves by distance, terrain and dogs allowed.' },
  { icon: 'download', title: 'Take the map', body: 'Download printable maps that work without a signal.' },
  { icon: 'help', title: 'Ask a steward', body: 'Our stewards answer questions within two days.' },
] as const

const steps = [
  { title: 'Pick a date', body: 'Crew days run every second Saturday.' },
  { title: 'Bring gloves', body: 'We supply tools, water and snacks.' },
  { title: 'Meet at the kiosk', body: 'We start at nine and finish by noon.' },
]

/** Icon (default), numbered, rule-topped and framed grids. */
export function FeatureGridKinds() {
  return (
    <div className={styles.stack}>
      <FeatureGrid header={{ eyebrow: 'Visit', heading: 'Plan your walk' }}>
        <FeatureGridList>
          {ways.map((way) => (
            <FeatureGridCell key={way.title}>
              <FeatureGridIcon>
                <Icon name={way.icon} size="block" />
              </FeatureGridIcon>
              <FeatureGridHeading>
                <FeatureGridLink href="#kinds">{way.title}</FeatureGridLink>
              </FeatureGridHeading>
              <FeatureGridBody>{way.body}</FeatureGridBody>
            </FeatureGridCell>
          ))}
        </FeatureGridList>
      </FeatureGrid>

      <FeatureGrid kind="numbered">
        <FeatureGridList>
          {steps.map((step) => (
            <FeatureGridCell key={step.title}>
              <FeatureGridHeading>{step.title}</FeatureGridHeading>
              <FeatureGridBody>{step.body}</FeatureGridBody>
            </FeatureGridCell>
          ))}
        </FeatureGridList>
      </FeatureGrid>

      <FeatureGrid kind="rule-topped">
        <FeatureGridList>
          {steps.map((step) => (
            <FeatureGridCell key={step.title}>
              <FeatureGridHeading>{step.title}</FeatureGridHeading>
              <FeatureGridBody>{step.body}</FeatureGridBody>
            </FeatureGridCell>
          ))}
        </FeatureGridList>
      </FeatureGrid>

      <FeatureGrid kind="framed">
        <FeatureGridList>
          {['Quiet', 'Shaded', 'Level', 'Open daily'].map((title) => (
            <FeatureGridCell key={title}>
              <FeatureGridHeading>{title}</FeatureGridHeading>
              <FeatureGridBody>One sentence on what it means for your visit.</FeatureGridBody>
            </FeatureGridCell>
          ))}
        </FeatureGridList>
      </FeatureGrid>
    </div>
  )
}

import {
  FeatureGrid,
  FeatureGridBody,
  FeatureGridCell,
  FeatureGridDrawing,
  FeatureGridHeading,
  FeatureGridList,
} from '@fairgarden-private/design/components/FeatureGrid'
import { Ground } from '@fairgarden-private/design/components/Ground'
import styles from './grounds.module.css'

/** A glossary grid: drawings in the ground's one ink, captions in caps. */
export function FeatureGridGrounds() {
  return (
    <div className={styles.row}>
      <Ground kind="face" preset="paper" className={styles.face}>
        <p className={styles.name}>paper</p>
        <Glossary />
      </Ground>
      <Ground kind="field" preset="forest" className={styles.face}>
        <p className={styles.name}>forest field</p>
        <Glossary />
      </Ground>
      <Ground kind="field" preset="leaf" className={styles.face}>
        <p className={styles.name}>leaf field</p>
        <Glossary />
      </Ground>
    </div>
  )
}

function Glossary() {
  return (
    <FeatureGrid kind="glossary">
      <FeatureGridList>
        <FeatureGridCell>
          <FeatureGridDrawing>
            <svg viewBox="0 0 64 64" strokeWidth="2">
              <path d="M8 56 32 12l24 44z" />
            </svg>
          </FeatureGridDrawing>
          <FeatureGridHeading>Above</FeatureGridHeading>
          <FeatureGridBody>Higher than the trail.</FeatureGridBody>
        </FeatureGridCell>
        <FeatureGridCell>
          <FeatureGridDrawing>
            <svg viewBox="0 0 64 64" strokeWidth="2">
              <circle cx="32" cy="32" r="22" />
            </svg>
          </FeatureGridDrawing>
          <FeatureGridHeading>Around</FeatureGridHeading>
          <FeatureGridBody>A loop back to the lot.</FeatureGridBody>
        </FeatureGridCell>
      </FeatureGridList>
    </FeatureGrid>
  )
}