Tabs

import {
  Tabs,
  TabsList,
  TabsPanel,
  TabsTab,
} from '@fairgarden-private/design/components/Tabs'
import styles from './variants.module.css'

/**
 * Underline tabs (default), a longer underline row that scrolls with a ›
 * button, and the segmented bar, filled and bare.
 */
export function TabsVariants() {
  return (
    <div className={styles.stack}>
      <Tabs defaultValue="overview">
        <TabsList>
          <TabsTab value="overview">Overview</TabsTab>
          <TabsTab value="access">Trails and access</TabsTab>
          <TabsTab value="stewardship">Stewardship</TabsTab>
        </TabsList>
        <TabsPanel value="overview">
          <p className={styles.copy}>312 acres of wet meadow and oak savanna, protected since 1998.</p>
        </TabsPanel>
        <TabsPanel value="access">
          <p className={styles.copy}>Four marked trails, open dawn to dusk. Dogs on leash.</p>
        </TabsPanel>
        <TabsPanel value="stewardship">
          <p className={styles.copy}>Volunteers pull invasive buckthorn on the first Saturday of each month.</p>
        </TabsPanel>
      </Tabs>

      <Tabs defaultValue="easements">
        <TabsList>
          <TabsTab value="easements">Easements</TabsTab>
          <TabsTab value="acquisitions">Acquisitions</TabsTab>
          <TabsTab value="restoration">Restoration</TabsTab>
          <TabsTab value="monitoring">Monitoring</TabsTab>
          <TabsTab value="archive" disabled>
            Archive
          </TabsTab>
        </TabsList>
        <TabsPanel value="easements">
          <p className={styles.copy}>Four to six tabs hug their labels; the row scrolls when it runs out of room.</p>
        </TabsPanel>
        <TabsPanel value="acquisitions">
          <p className={styles.copy}>Land bought outright and held in trust.</p>
        </TabsPanel>
        <TabsPanel value="restoration">
          <p className={styles.copy}>Prairie seeding, wetland berms and prescribed burns.</p>
        </TabsPanel>
        <TabsPanel value="monitoring">
          <p className={styles.copy}>Annual visits to every protected parcel.</p>
        </TabsPanel>
        <TabsPanel value="archive">
          <p className={styles.copy}>Unavailable.</p>
        </TabsPanel>
      </Tabs>

      <Tabs variant="segmented" filled defaultValue="land">
        <TabsList>
          <TabsTab value="land">Protect land</TabsTab>
          <TabsTab value="water">Protect water and wetland habitat</TabsTab>
          <TabsTab value="people">Connect people</TabsTab>
        </TabsList>
        <TabsPanel value="land">
          <p className={styles.copy}>Filled segmented cells belong on paper and white only.</p>
        </TabsPanel>
        <TabsPanel value="water">
          <p className={styles.copy}>Long labels wrap to two lines instead of truncating.</p>
        </TabsPanel>
        <TabsPanel value="people">
          <p className={styles.copy}>Guided walks every weekend from April to October.</p>
        </TabsPanel>
      </Tabs>

      <Tabs variant="segmented" defaultValue="day">
        <TabsList>
          <TabsTab value="day">Day</TabsTab>
          <TabsTab value="week">Week</TabsTab>
          <TabsTab value="month">Month</TabsTab>
        </TabsList>
        <TabsPanel value="day">
          <p className={styles.copy}>Unfilled, the bar and weight alone mark the current cell.</p>
        </TabsPanel>
        <TabsPanel value="week">
          <p className={styles.copy}>Seven days of events.</p>
        </TabsPanel>
        <TabsPanel value="month">
          <p className={styles.copy}>The whole month at a glance.</p>
        </TabsPanel>
      </Tabs>
    </div>
  )
}

import {
  Tabs,
  TabsList,
  TabsPanel,
  TabsTab,
} from '@fairgarden-private/design/components/Tabs'
import styles from './color.module.css'

/** `primary` drives labels, bar and baseline; `secondary` only the filled segmented cell. */
export function TabsColor() {
  return (
    <div className={styles.stack}>
      <Tabs primary="plum" defaultValue="birds">
        <TabsList>
          <TabsTab value="birds">Birds</TabsTab>
          <TabsTab value="plants">Plants</TabsTab>
          <TabsTab value="insects">Insects</TabsTab>
        </TabsList>
        <TabsPanel value="birds">
          <p className={styles.copy}>Primary plum: labels, bar and baseline.</p>
        </TabsPanel>
        <TabsPanel value="plants">
          <p className={styles.copy}>Sedges, milkweed and bur oak.</p>
        </TabsPanel>
        <TabsPanel value="insects">
          <p className={styles.copy}>Monarchs and native bees.</p>
        </TabsPanel>
      </Tabs>

      <Tabs variant="segmented" filled secondary="indigo" defaultValue="visit">
        <TabsList>
          <TabsTab value="visit">Visit</TabsTab>
          <TabsTab value="volunteer">Volunteer</TabsTab>
          <TabsTab value="give">Give</TabsTab>
        </TabsList>
        <TabsPanel value="visit">
          <p className={styles.copy}>Secondary indigo: the filled cell and its edge.</p>
        </TabsPanel>
        <TabsPanel value="volunteer">
          <p className={styles.copy}>Workdays run year round.</p>
        </TabsPanel>
        <TabsPanel value="give">
          <p className={styles.copy}>Every gift stays local.</p>
        </TabsPanel>
      </Tabs>
    </div>
  )
}

import {
  Tabs,
  TabsList,
  TabsPanel,
  TabsTab,
} from '@fairgarden-private/design/components/Tabs'
import { PresetGround } from '@/components/PresetGround'
import styles from './grounds.module.css'

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

/** The segmented cell fills on paper only; on forest the bar and weight carry "current". */
export function TabsGrounds() {
  return (
    <div className={styles.row}>
      {presets.map((preset) => (
        <PresetGround key={preset} preset={preset} className={styles.face}>
          <p className={styles.name}>{preset}</p>
          <Tabs defaultValue="map">
            <TabsList>
              <TabsTab value="map">Map</TabsTab>
              <TabsTab value="list">List</TabsTab>
            </TabsList>
            <TabsPanel value="map">
              <p className={styles.copy}>Trailheads and parking.</p>
            </TabsPanel>
            <TabsPanel value="list">
              <p className={styles.copy}>Every preserve, A to Z.</p>
            </TabsPanel>
          </Tabs>
          {preset === 'paper' ? (
            <Tabs variant="segmented" filled defaultValue="now">
              <TabsList>
                <TabsTab value="now">Now</TabsTab>
                <TabsTab value="later">Later</TabsTab>
              </TabsList>
              <TabsPanel value="now">
                <p className={styles.copy}>Filled on a light ground.</p>
              </TabsPanel>
              <TabsPanel value="later">
                <p className={styles.copy}>Upcoming.</p>
              </TabsPanel>
            </Tabs>
          ) : (
            <Tabs variant="segmented" defaultValue="now">
              <TabsList>
                <TabsTab value="now">Now</TabsTab>
                <TabsTab value="later">Later</TabsTab>
              </TabsList>
              <TabsPanel value="now">
                <p className={styles.copy}>No cell fill on a deep ground.</p>
              </TabsPanel>
              <TabsPanel value="later">
                <p className={styles.copy}>Upcoming.</p>
              </TabsPanel>
            </Tabs>
          )}
        </PresetGround>
      ))}
    </div>
  )
}