Carousel 轮播

'use client'

import { useState } from 'react'
import { ChevronLeft, ChevronRight } from 'lucide-react'
import {
  Carousel,
  FormField,
  IconButton,
  Image,
  Inline,
  Link,
  Slider,
  Stack,
  Switch,
  Text,
} from '@hina-ui/react'
import { dataListDemo } from '../../data-list'

const library = dataListDemo('zh-CN')
const items = [0, 3, 10, 5, 11, 6, 4, 8].map(index => library[index]!)

export default function Demo() {
  const [width, setWidth] = useState<number | undefined>(100)
  const [rtl, setRtl] = useState(false)

  return (
    <Stack className="w-full max-w-2xl" data-demo-carousel-grouped="">
      <Inline gap="lg" align="end">
        <FormField label="容器宽度" className="min-w-40 flex-1">
          <Slider
            value={width}
            onValueChange={setWidth}
            min={50}
            max={100}
            format={value => value + '%'}
          />
        </FormField>
        <Switch checked={rtl} onCheckedChange={setRtl} className="mb-1">
          从右向左（RTL）
        </Switch>
      </Inline>
      <Text size="sm" tone="muted">
        竖版、方形、横版封面保留各自比例。拖动滑块改变容器宽度，观察分组变化。
      </Text>
      <Carousel
        items={items}
        getKey={item => item.id}
        dir={rtl ? 'rtl' : 'ltr'}
        slidesToScroll="auto"
        itemClass="basis-auto"
        label="浏览书库"
        className="self-center"
        style={{ width: width + '%' }}
        renderControls={({ prev, next, canPrev, canNext, index, snapCount }) => (
          <Inline justify="between" className="w-full">
            <Text size="sm" tone="muted" dir="ltr">
              {snapCount ? `${index + 1} / ${snapCount}` : '—'}
            </Text>
            <Inline gap="xs">
              <IconButton label="上一组" disabled={!canPrev} onClick={prev}>
                <ChevronLeft className="rtl:rotate-180" />
              </IconButton>
              <IconButton label="下一组" disabled={!canNext} onClick={next}>
                <ChevronRight className="rtl:rotate-180" />
              </IconButton>
            </Inline>
          </Inline>
        )}
      >
        {({ item }) => (
          <Stack
            gap="sm"
            className="h-full"
            style={{ width: `min(${(192 * item.cover.width) / item.cover.height}px, 100cqw)` }}
          >
            <Image
              src={item.cover.src}
              alt={item.title}
              ratio={item.cover.width / item.cover.height}
              draggable={false}
              className="rounded-lg"
            />
            <Link
              href={item.url}
              target="_blank"
              rel="noopener noreferrer"
              tone="neutral"
              className="line-clamp-2 w-fit max-w-full text-sm"
            >
              {item.title}
            </Link>
            <Text size="xs" tone="muted" truncate>
              {item.developer}
            </Text>
          </Stack>
        )}
      </Carousel>
    </Stack>
  )
}

'use client'

import { useState } from 'react'
import { Carousel, Image, Inline, Progress, SegmentedControl, Stack, Text } from '@hina-ui/react'
import { dataListDemo } from '../../data-list'

const items = dataListDemo('zh-CN').slice(0, 4)
const options = [
  { value: 'capsule', label: '默认' },
  { value: 'thumbnails', label: '缩略图' },
  { value: 'progress', label: '进度条' },
]

export default function Demo() {
  const [mode, setMode] = useState<string | number>('thumbnails')
  const [index, setIndex] = useState(0)

  return (
    <Stack className="w-full max-w-lg" data-demo-carousel-indicators="">
      <SegmentedControl
        value={mode}
        onValueChange={setMode}
        options={options}
        aria-label="指示器样式"
        size="sm"
        className="self-center"
      />
      <Carousel
        index={index}
        onIndexChange={setIndex}
        items={items}
        getKey={item => item.id}
        indicators
        label="自定义封面画廊"
        renderIndicator={
          mode === 'thumbnails'
            ? ({ index: position, active }) => (
                <Image
                  src={items[position]!.cover.src}
                  alt=""
                  ratio={3 / 4}
                  lazy={false}
                  draggable={false}
                  className={`w-8 rounded-sm transition-opacity duration-(--hn-duration-base) motion-reduce:transition-none ${active ? 'opacity-100 ring-2 ring-accent ring-offset-2 ring-offset-surface' : 'opacity-50'}`}
                />
              )
            : undefined
        }
        renderIndicators={
          mode === 'progress'
            ? ({ index: position, snapCount }) => (
                <Inline gap="sm" wrap={false} className="w-36">
                  <Progress
                    value={position + 1}
                    max={Math.max(1, snapCount)}
                    size="sm"
                    aria-label="画廊进度"
                    className="flex-1"
                  />
                  <Text size="xs" tone="muted" dir="ltr" className="shrink-0 tabular-nums">
                    {position + 1} / {snapCount}
                  </Text>
                </Inline>
              )
            : undefined
        }
      >
        {({ item }) => (
          <Image
            src={item.cover.src}
            alt={item.title}
            ratio={16 / 10}
            draggable={false}
            className="rounded-xl"
          />
        )}
      </Carousel>
    </Stack>
  )
}

'use client'

import { Carousel, Card, Image, Link, Stack, Text } from '@hina-ui/react'
import { dataListDemo } from '../../data-list'

const items = dataListDemo('zh-CN').slice(0, 6)

export default function Demo() {
  return (
    <Carousel
      items={items}
      getKey={item => item.id}
      orientation="vertical"
      viewportClass="h-72"
      itemClass="basis-1/2"
      label="待阅书单"
      className="max-w-lg"
    >
      {({ item }) => (
        <Card className="flex h-full items-center gap-4 shadow-none">
          <Image
            src={item.cover.src}
            alt=""
            ratio={3 / 4}
            draggable={false}
            className="w-16 shrink-0 rounded-md"
          />
          <Stack gap="xs" className="min-w-0">
            <Link
              href={item.url}
              target="_blank"
              rel="noopener noreferrer"
              tone="neutral"
              className="line-clamp-2 w-fit text-sm font-medium"
            >
              {item.title}
            </Link>
            <Text size="xs" tone="muted" truncate>
              {item.developer}
            </Text>
            <Text as="time" dateTime={item.released} size="xs" tone="muted">
              {item.released}
            </Text>
          </Stack>
        </Card>
      )}
    </Carousel>
  )
}

'use client'

import { Carousel, Card, Image, Link, Stack, Text } from '@hina-ui/react'
import { dataListDemo } from '../../data-list'

const items = dataListDemo('zh-CN').slice(0, 4)

export default function Demo() {
  return (
    <Stack className="w-full max-w-lg">
      <Carousel
        items={items}
        getKey={item => item.id}
        loop
        autoplay={4000}
        indicators
        label="阅读推荐"
      >
        {({ item }) => (
          <Card className="flex items-center gap-5 shadow-none">
            <Image
              src={item.cover.src}
              alt=""
              ratio={3 / 4}
              draggable={false}
              className="w-24 shrink-0 rounded-md"
            />
            <Stack gap="sm" className="min-w-0">
              <Link
                href={item.url}
                target="_blank"
                rel="noopener noreferrer"
                tone="neutral"
                className="line-clamp-2 w-fit font-medium"
              >
                {item.title}
              </Link>
              <Text size="sm" tone="muted" className="line-clamp-2">
                {item.developer}
              </Text>
            </Stack>
          </Card>
        )}
      </Carousel>
      <Text size="sm" tone="muted">
        悬停时暂停；键盘进入或手动切换后，点击“开始自动播放”恢复。
      </Text>
    </Stack>
  )
}

'use client'

import { useState } from 'react'
import { Carousel, Image } from '@hina-ui/react'
import { dataListDemo } from '../../data-list'

const items = dataListDemo('zh-CN').slice(0, 5)

export default function Demo() {
  const [index, setIndex] = useState(2)

  return (
    <Carousel
      index={index}
      onIndexChange={setIndex}
      items={items}
      getKey={item => item.id}
      indicators
      label="封面画廊"
      className="max-w-lg"
    >
      {({ item }) => (
        <Image
          src={item.cover.src}
          alt={item.title}
          ratio={4 / 3}
          draggable={false}
          className="rounded-xl"
        />
      )}
    </Carousel>
  )
}