Card Grid

import {
  Card,
  CardBody,
  CardMeta,
  CardTitle,
  CardTitleLink,
} from '@fairgarden-private/design/components/Card'
import {
  CardGrid,
  CardGridFooter,
  CardGridFooterLink,
  CardGridItem,
  CardGridList,
} from '@fairgarden-private/design/components/CardGrid'
import { SectionHeader } from '@fairgarden-private/design/components/SectionHeader'
import styles from './kinds.module.css'

const programs = [
  { title: 'Spring bird count', meta: 'Program · May', body: 'Volunteers tally migrants along the river trail.' },
  { title: 'Meadow restoration', meta: 'Program · All year', body: 'Three seasons of native seed and patience.' },
  { title: 'Night walk', meta: 'Event · Fridays', body: 'Owls, moths and the smell of wet leaves.' },
]

const species = ['Barred owl', 'Wood thrush', 'Red eft', 'Pawpaw']

/**
 * Editorial grids go 1 → 2 → 3 columns on their container; compact grids
 * 1 → 2 → 4. `header` takes SectionHeader props (the grid is then labelled
 * by the heading) or any node, such as a SectionHeader element.
 */
export function CardGridKinds() {
  return (
    <div className={styles.stack}>
      <CardGrid kind="editorial" header={{ eyebrow: 'Programs', heading: 'Get outside' }}>
        <CardGridList>
          {programs.map((program) => (
            <CardGridItem key={program.title}>
              <Card faced>
                <CardTitle>
                  <CardTitleLink href="#kinds">{program.title}</CardTitleLink>
                </CardTitle>
                <CardMeta>{program.meta}</CardMeta>
                <CardBody>{program.body}</CardBody>
              </Card>
            </CardGridItem>
          ))}
        </CardGridList>
        <CardGridFooter>
          <CardGridFooterLink href="#kinds">See all programs</CardGridFooterLink>
        </CardGridFooter>
      </CardGrid>

      <CardGrid
        kind="compact"
        aria-labelledby="card-grid-species"
        header={<SectionHeader level="module" heading="On the preserve" headingId="card-grid-species" />}
      >
        <CardGridList>
          {species.map((name) => (
            <CardGridItem key={name}>
              <Card>
                <CardTitle>
                  <CardTitleLink href="#kinds">{name}</CardTitleLink>
                </CardTitle>
                <CardMeta>Seen this week</CardMeta>
              </Card>
            </CardGridItem>
          ))}
        </CardGridList>
      </CardGrid>
    </div>
  )
}

'use client'

import * as React from 'react'
import { Button } from '@fairgarden-private/design/components/Button'
import {
  Card,
  CardMeta,
  CardTitle,
  CardTitleLink,
} from '@fairgarden-private/design/components/Card'
import {
  CardGrid,
  CardGridCount,
  CardGridItem,
  CardGridList,
  CardGridToolbar,
} from '@fairgarden-private/design/components/CardGrid'
import {
  EmptyState,
  EmptyStateAction,
  EmptyStateHeading,
  EmptyStateText,
} from '@fairgarden-private/design/components/EmptyState'
import { Toggle } from '@fairgarden-private/design/components/Toggle'

const events = [
  { title: 'Night walk', format: 'In person' },
  { title: 'Seed swap', format: 'In person' },
  { title: 'Stream ecology talk', format: 'Virtual' },
  { title: 'Trail crew day', format: 'In person' },
]

/** The count is a polite live region; an empty result swaps the list for an EmptyState. */
export function CardGridFiltered() {
  const [virtualOnly, setVirtualOnly] = React.useState(false)
  const [hideVirtual, setHideVirtual] = React.useState(false)
  const shown = events.filter(
    (event) =>
      (!virtualOnly || event.format === 'Virtual') && (!hideVirtual || event.format !== 'Virtual')
  )

  return (
    <CardGrid kind="compact">
      <CardGridToolbar>
        <Toggle variant="chip" pressed={virtualOnly} onPressedChange={setVirtualOnly}>
          Virtual Only
        </Toggle>
        <Toggle variant="chip" pressed={hideVirtual} onPressedChange={setHideVirtual}>
          Hide Virtual
        </Toggle>
      </CardGridToolbar>
      <CardGridCount>
        {shown.length} {shown.length === 1 ? 'event' : 'events'}
      </CardGridCount>
      {shown.length > 0 ? (
        <CardGridList>
          {shown.map((event) => (
            <CardGridItem key={event.title}>
              <Card faced>
                <CardTitle>
                  <CardTitleLink href="#filtered">{event.title}</CardTitleLink>
                </CardTitle>
                <CardMeta>{event.format}</CardMeta>
              </Card>
            </CardGridItem>
          ))}
        </CardGridList>
      ) : (
        <EmptyState filtered>
          <EmptyStateHeading>No events match these filters</EmptyStateHeading>
          <EmptyStateText>“Virtual Only” and “Hide Virtual” leave nothing to show.</EmptyStateText>
          <EmptyStateAction>
            <Button
              onClick={() => {
                setVirtualOnly(false)
                setHideVirtual(false)
              }}
            >
              Clear Filters
            </Button>
          </EmptyStateAction>
        </EmptyState>
      )}
    </CardGrid>
  )
}