Carousel

import { Carousel, CarouselContent, CarouselControls, CarouselItem } from "cennge-ui";

const repositories = [
  { name: "cennge-ui", description: "React UI library" },
  { name: "ai-niche-scout", description: "Finds niches worth building for" },
  { name: "payload-cache", description: "FastAPI cache service" },
  { name: "spredo-crypto-screener", description: "Crypto screener" },
  { name: "playwright-msi-scraper", description: "Scraper on Playwright" },
];

export default function RepositoryCarousel() {
  return (
    <Carousel
      aria-label="Repositories"
      gap="0.75rem"
      // 1.2 on phones shows the edge of the next card; two from 640px, three from 1024px.
      className="w-full [--carousel-per-view:1.2] sm:[--carousel-per-view:2] lg:[--carousel-per-view:3]"
    >
      <CarouselContent>
        {repositories.map((repository) => (
          <CarouselItem key={repository.name}>
            <div className="flex h-28 flex-col justify-between rounded-large bg-surface-3 p-4">
              <span className="truncate font-semibold">{repository.name}</span>
              <span className="text-sm text-muted">{repository.description}</span>
            </div>
          </CarouselItem>
        ))}
      </CarouselContent>
      <CarouselControls />
    </Carousel>
  );
}

import { Carousel, CarouselContent, CarouselControls, CarouselItem } from "cennge-ui";

const tips = [
  { title: "One attribute for the accent", text: 'Set data-accent="blue" on any element and everything inside takes the blue accent.' },
  { title: "Every colour is a variable", text: "Colours, radii and surfaces are --cennge-* CSS variables: recolour without a rebuild." },
  { title: "Search from anywhere", text: "Press Ctrl K, or Command K on a Mac, to search these docs." },
];

export default function Tips() {
  return (
    <Carousel aria-label="Tips" autoplay loop className="w-full max-w-md">
      <CarouselContent>
        {tips.map((tip) => (
          <CarouselItem key={tip.title}>
            <div className="flex h-32 flex-col gap-2 rounded-large bg-surface-3 p-5">
              <p className="font-semibold">{tip.title}</p>
              <p className="text-sm text-muted">{tip.text}</p>
            </div>
          </CarouselItem>
        ))}
      </CarouselContent>
      <CarouselControls />
    </Carousel>
  );
}

import { useId } from "react";
import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, useCarousel } from "cennge-ui";

const charts = [
  { name: "BarChart", text: "Columns or horizontal bars, grouped or stacked." },
  { name: "LineChart", text: "Change over time, straight or smooth; a missing value breaks the line." },
  { name: "AreaChart", text: "Lines with a wash below, stacked or not." },
  { name: "DonutChart", text: "A whole and its parts, as a ring with the total in the middle or as a pie." },
  { name: "Sparkline", text: "A trend at a glance, beside the number it belongs to." },
];

/** Inside <Carousel>, useCarousel gives the position and the moves. */
function Header({ titleId }: { titleId: string }) {
  const { index, count } = useCarousel();
  return (
    <div className="flex items-center gap-2">
      <p id={titleId} className="font-semibold">
        New in cennge-ui 0.3.0
      </p>
      <span className="ml-auto text-sm text-muted tabular-nums" aria-hidden="true">
        {index + 1} / {count}
      </span>
      <CarouselPrevious />
      <CarouselNext />
    </div>
  );
}

export default function ChartsCarousel() {
  const titleId = useId();
  return (
    <Carousel aria-labelledby={titleId} className="w-full max-w-md">
      <Header titleId={titleId} />
      <CarouselContent>
        {charts.map((chart) => (
          <CarouselItem key={chart.name}>
            <div className="flex h-28 flex-col gap-1.5 rounded-large bg-surface-3 p-5">
              <code className="font-mono font-semibold text-primary-text">{chart.name}</code>
              <p className="text-sm text-muted">{chart.text}</p>
            </div>
          </CarouselItem>
        ))}
      </CarouselContent>
    </Carousel>
  );
}