Carousel

import { Carousel, CarouselSlide } from '@fairgarden-private/design/components/Carousel'
import {
  Card,
  CardMedia,
  CardMeta,
  CardTitle,
  CardTitleLink,
} from '@fairgarden-private/design/components/Card'
import styles from './cards.module.css'

const portrait =
  "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 3 4'%3E%3Crect width='3' height='4' fill='%23b7c4a8'/%3E%3Ccircle cx='1.5' cy='1.6' r='.8' fill='%23627a55'/%3E%3C/svg%3E"
const landscape =
  "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 3 2'%3E%3Crect width='3' height='2' fill='%23c9c1a6'/%3E%3Cpath d='M0 1.4 .9.9l.7.4.8-.6.6.5V2H0z' fill='%237a6d4a'/%3E%3C/svg%3E"

const species = [
  ['Hermit Thrush', 'Catharus guttatus'],
  ['Veery', 'Catharus fuscescens'],
  ['Swainson’s Thrush', 'Catharus ustulatus'],
  ['Gray-cheeked Thrush', 'Catharus minimus'],
  ['Bicknell’s Thrush', 'Catharus bicknelli'],
  ['American Robin', 'Turdus migratorius'],
]

const posts = [
  ['The river comes back', 'Feature · 12 min read'],
  ['What an easement protects', 'Explainer · 6 min read'],
  ['A year on the prairie', 'Photo essay · 9 min read'],
  ['Counting owls after dark', 'Field notes · 4 min read'],
  ['Seed libraries, explained', 'Explainer · 5 min read'],
]

/** Portrait species cards (2 + peek) and editorial post cards (`post`: 3 + peek from 1024 px of container). */
export function CarouselCards() {
  return (
    <div className={styles.stack}>
      <Carousel
        kind="cards"
        label="Similar species"
        header={<h3 className={styles.head}>Similar Species</h3>}
      >
        {species.map(([name, latin]) => (
          <CarouselSlide key={name}>
            <Card>
              <CardMedia>
                {/* A data-URI stand-in photo; next/image adds nothing here. */}
                <img src={portrait} alt="" />
              </CardMedia>
              <CardTitle>
                <CardTitleLink href="#species">{name}</CardTitleLink>
              </CardTitle>
              <CardMeta>
                <i>{latin}</i>
              </CardMeta>
            </Card>
          </CarouselSlide>
        ))}
      </Carousel>
      <Carousel
        kind="cards"
        post
        label="Related stories"
        header={<h3 className={styles.head}>Related Stories</h3>}
      >
        {posts.map(([title, meta]) => (
          <CarouselSlide key={title}>
            <Card>
              <CardMedia>
                <img src={landscape} alt="" />
              </CardMedia>
              <CardTitle>
                <CardTitleLink href="#post">{title}</CardTitleLink>
              </CardTitle>
              <CardMeta>{meta}</CardMeta>
            </Card>
          </CarouselSlide>
        ))}
      </Carousel>
    </div>
  )
}

import { Carousel, CarouselPhoto } from '@fairgarden-private/design/components/Carousel'

function stand(width: number, height: number, sky: string, land: string) {
  return `data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 ${width} ${height}'%3E%3Crect width='${width}' height='${height}' fill='%23${sky}'/%3E%3Cpath d='M0 ${height * 0.7}L${width * 0.3} ${height * 0.45}L${width * 0.55} ${height * 0.62}L${width} ${height * 0.4}V${height}H0z' fill='%23${land}'/%3E%3C/svg%3E`
}

const photos = [
  {
    ratio: 3 / 2,
    caption: 'Adult male in spring, singing from a low perch.',
    credit: 'Photo: A. Díaz',
  },
  {
    ratio: 4 / 5,
    caption: 'Nest of dead leaves and mud in a sapling fork.',
    credit: 'Photo: J. Okafor',
  },
  {
    ratio: 16 / 9,
    caption: 'Breeding habitat: mature eastern hardwood forest.',
    credit: 'Photo: M. Chen',
  },
  {
    ratio: 1,
    caption: 'Juvenile, spotted on the back as well as the breast.',
    credit: 'Photo: A. Díaz',
  },
  { ratio: 3 / 2, caption: 'Foraging in leaf litter along a stream.', credit: 'Photo: R. Silva' },
  {
    ratio: 2 / 3,
    caption: 'Winter range in the lowland forests of Central America.',
    credit: 'Photo: L. Park',
  },
  { ratio: 3 / 2, caption: 'Banding station, early May.', credit: 'Photo: J. Okafor' },
  { ratio: 5 / 4, caption: 'Eggs: three to four, pale blue.', credit: 'Photo: M. Chen' },
]

/** Eight photos: ≈ 88% single slides, and from 1024 px of container a 480 px strip at each photo's own ratio. */
export function CarouselPhotos() {
  return (
    <Carousel kind="photos" label="Wood Thrush photos" printUrl="example.org/wood-thrush/photos">
      {photos.map((photo, index) => (
        <CarouselPhoto
          key={photo.caption}
          src={stand(
            Math.round(photo.ratio * 120),
            120,
            index % 2 ? 'b7c4a8' : 'c9c1a6',
            index % 2 ? '627a55' : '7a6d4a',
          )}
          alt={photo.caption}
          ratio={photo.ratio}
          caption={photo.caption}
          credit={photo.credit}
        />
      ))}
    </Carousel>
  )
}