Section Bar

'use client'

import * as React from 'react'
import { SectionBar } from '@fairgarden-private/design/components/SectionBar'
import styles from './section.module.css'

const sections = [
  { id: 'bar-what', label: 'What community-centered conservation is' },
  { id: 'bar-who', label: 'For whom? By whom?' },
  { id: 'bar-how', label: 'How land trusts begin' },
]

/** The section bar over three sections; it docks inside this frame as you scroll. */
export function SectionBarSection() {
  const [docked, setDocked] = React.useState(false)

  return (
    <div className={styles.page}>
      <SectionBar
        capped
        docked={docked}
        onDockChange={setDocked}
        items={[
          { label: 'Home', href: '#bar-what' },
          { label: 'Resources', href: '#bar-what' },
          { label: 'Guides', href: '#bar-what' },
        ]}
        current="Community-centered conservation"
        sections={sections}
      />
      {sections.map((section) => (
        <section key={section.id} id={section.id} className={styles.section}>
          <h2 className={styles.heading}>{section.label}</h2>
          <p className={styles.text}>
            Land trusts work with the people who live on and near the land. This section runs long
            enough to scroll, so the bar can dock and follow the section in view.
          </p>
        </section>
      ))}
    </div>
  )
}

'use client'

import * as React from 'react'
import { SectionBar } from '@fairgarden-private/design/components/SectionBar'
import styles from './tabs.module.css'

const sections = [
  { id: 'tabs-alliance', label: 'Land Trust Alliance' },
  { id: 'tabs-community', label: 'Community' },
  { id: 'tabs-affiliates', label: 'Affiliates' },
]

/** The tab strip from 1024 px, with the "Back to top" cell; below 1024 px it is a section bar. */
export function SectionBarTabs() {
  const [docked, setDocked] = React.useState(false)

  return (
    <div className={styles.page} id="tabs-top" tabIndex={-1}>
      <SectionBar
        kind="tabs"
        toTop="#tabs-top"
        docked={docked}
        onDockChange={setDocked}
        preset="white"
        items={[{ label: 'Home', href: '#tabs-top' }]}
        current="Connect"
        sections={sections}
      />
      {sections.map((section) => (
        <section key={section.id} id={section.id} className={styles.section}>
          <h2 className={styles.heading}>{section.label}</h2>
          <p className={styles.text}>Scroll to move the current cell; click a cell to jump.</p>
        </section>
      ))}
    </div>
  )
}

'use client'

import * as React from 'react'
import { SectionBar } from '@fairgarden-private/design/components/SectionBar'
import { Search } from '@fairgarden-private/design/components/Search'
import styles from './guide.module.css'

const birds = [
  { value: 'Wood Thrush', secondaryName: 'Hylocichla mustelina' },
  { value: 'Hermit Thrush', secondaryName: 'Catharus guttatus' },
  { value: 'Veery', secondaryName: 'Catharus fuscescens' },
]

/** The guide bar: search at the start, the centred breadcrumb, the Listen jump at the end. */
export function SectionBarGuide() {
  const [docked, setDocked] = React.useState(false)

  return (
    <div className={styles.page}>
      <SectionBar
        kind="guide"
        docked={docked}
        onDockChange={setDocked}
        search={<Search label="Search the guide" hideSubmit items={birds} />}
        items={[
          { label: 'Bird guide', href: '#guide-overview' },
          { label: 'Thrushes', href: '#guide-overview' },
        ]}
        current="Wood Thrush"
        listen={{ href: '#guide-recordings', count: 6 }}
        sections={[
          { id: 'guide-overview', label: 'Overview' },
          { id: 'guide-recordings', label: 'Songs and calls' },
        ]}
      />
      <section id="guide-overview" className={styles.section}>
        <h2 className={styles.heading}>Overview</h2>
        <p className={styles.text}>A plump thrush of eastern forests, rust above and spotted below.</p>
      </section>
      <section id="guide-recordings" className={styles.section}>
        <h2 className={styles.heading}>Songs and calls</h2>
        <p className={styles.text}>Following Listen moves focus to this heading.</p>
      </section>
    </div>
  )
}