Carousel

import { Carousel, CarouselSlide, Image } from "@nexera-ui/react";

const scene = (sky: string, ground: string) =>
  `data:image/svg+xml,${encodeURIComponent(
    `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 300"><rect width="400" height="300" fill="${sky}"/>` +
      `<circle cx="300" cy="80" r="36" fill="white" fill-opacity="0.85"/>` +
      `<path d="M0 230 L120 140 L210 210 L290 160 L400 230 L400 300 L0 300 Z" fill="${ground}"/></svg>`,
  )}`;

const PHOTOS = [
  { src: scene("navajowhite", "peru"), alt: "Team photo at the March offsite" },
  { src: scene("lightsteelblue", "seagreen"), alt: "Open-plan office, second floor" },
  { src: scene("lightblue", "darkolivegreen"), alt: "Hills behind the retreat venue" },
  { src: scene("thistle", "slateblue"), alt: "Welcome desk at reception" },
  { src: scene("khaki", "sienna"), alt: "Workshop room set up for twelve" },
  { src: scene("lightcyan", "teal"), alt: "Rooftop terrace at sunset" },
] as const;

const pictureSlides = PHOTOS.map((photo) => (
  <CarouselSlide key={photo.alt}>
    <Image src={photo.src} alt={photo.alt} ratio="16-9" />
  </CarouselSlide>
));

<Carousel aria-label="Photos from the offsite" className="max-w-xl" surface="on-media" isLooping>
  {pictureSlides}
</Carousel>;

import { Carousel, CarouselSlide } from "@nexera-ui/react";

const HIGHLIGHTS = [
  { title: "Welcome week", text: "Meet your buddy on day two.", tone: "bg-status-info-bg" },
  { title: "Benefits", text: "Enrol before the end of the month.", tone: "bg-status-success-bg" },
  { title: "Leave", text: "Request time off from the Leave page.", tone: "bg-status-warning-bg" },
  { title: "Payroll", text: "Payslips arrive on the 25th.", tone: "bg-status-leave-bg" },
  { title: "Learning", text: "Pick two courses for the quarter.", tone: "bg-brand-subtle" },
] as const;

const textSlides = HIGHLIGHTS.map((slide) => (
  <CarouselSlide key={slide.title}>
    <div className={`box-border h-full rounded-lg p-6 ${slide.tone}`}>
      <h3 className="m-0 text-heading-h4 text-primary">{slide.title}</h3>
      <p className="m-0 mt-1 text-body-default text-primary">{slide.text}</p>
    </div>
  </CarouselSlide>
));

<Carousel
  aria-label="Rotating highlights"
  className="max-w-xl"
  autoPlay
  interval={4000}
  isLooping
  indicator="lines"
>
  {textSlides}
</Carousel>;

import { Carousel, CarouselSlide, ImageTile } from "@nexera-ui/react";

const scene = (sky: string, ground: string) =>
  `data:image/svg+xml,${encodeURIComponent(
    `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 300"><rect width="400" height="300" fill="${sky}"/>` +
      `<circle cx="300" cy="80" r="36" fill="white" fill-opacity="0.85"/>` +
      `<path d="M0 230 L120 140 L210 210 L290 160 L400 230 L400 300 L0 300 Z" fill="${ground}"/></svg>`,
  )}`;

const PHOTOS = [
  { src: scene("navajowhite", "peru"), alt: "Team photo at the March offsite" },
  { src: scene("lightsteelblue", "seagreen"), alt: "Open-plan office, second floor" },
  { src: scene("lightblue", "darkolivegreen"), alt: "Hills behind the retreat venue" },
  { src: scene("thistle", "slateblue"), alt: "Welcome desk at reception" },
  { src: scene("khaki", "sienna"), alt: "Workshop room set up for twelve" },
  { src: scene("lightcyan", "teal"), alt: "Rooftop terrace at sunset" },
] as const;

const tileSlides = PHOTOS.map((photo) => (
  <CarouselSlide key={photo.alt}>
    <ImageTile src={photo.src} alt={photo.alt} onPress={() => undefined} />
  </CarouselSlide>
));

<Carousel aria-label="Gallery" className="max-w-3xl" slidesPerView={{ base: 1, sm: 2, lg: 3 }}>
  {tileSlides}
</Carousel>;

import { Carousel, CarouselSlide, Image } from "@nexera-ui/react";

const scene = (sky: string, ground: string) =>
  `data:image/svg+xml,${encodeURIComponent(
    `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 300"><rect width="400" height="300" fill="${sky}"/>` +
      `<circle cx="300" cy="80" r="36" fill="white" fill-opacity="0.85"/>` +
      `<path d="M0 230 L120 140 L210 210 L290 160 L400 230 L400 300 L0 300 Z" fill="${ground}"/></svg>`,
  )}`;

const PHOTOS = [
  { src: scene("navajowhite", "peru"), alt: "Team photo at the March offsite" },
  { src: scene("lightsteelblue", "seagreen"), alt: "Open-plan office, second floor" },
  { src: scene("lightblue", "darkolivegreen"), alt: "Hills behind the retreat venue" },
  { src: scene("thistle", "slateblue"), alt: "Welcome desk at reception" },
  { src: scene("khaki", "sienna"), alt: "Workshop room set up for twelve" },
  { src: scene("lightcyan", "teal"), alt: "Rooftop terrace at sunset" },
] as const;

const pictureSlides = PHOTOS.map((photo) => (
  <CarouselSlide key={photo.alt}>
    <Image src={photo.src} alt={photo.alt} ratio="16-9" />
  </CarouselSlide>
));

<Carousel aria-label="Photo gallery" className="max-w-xl" indicator="counter">
  {pictureSlides}
</Carousel>;

import { useState } from "react";
import { Carousel } from "@nexera-ui/react";

const HIGHLIGHTS = [
  { title: "Welcome week", text: "Meet your buddy on day two.", tone: "bg-status-info-bg" },
  { title: "Benefits", text: "Enrol before the end of the month.", tone: "bg-status-success-bg" },
  { title: "Leave", text: "Request time off from the Leave page.", tone: "bg-status-warning-bg" },
  { title: "Payroll", text: "Payslips arrive on the 25th.", tone: "bg-status-leave-bg" },
  { title: "Learning", text: "Pick two courses for the quarter.", tone: "bg-brand-subtle" },
] as const;

export function Controlled() {
  const [index, setIndex] = useState(2);
  return (
    <div className="flex max-w-xl flex-col gap-3">
      <Carousel
        aria-label="Onboarding highlights"
        className="max-w-xl"
        index={index}
        onIndexChange={setIndex}
      />
      <p className="m-0 text-body-default text-primary" role="status">
        {`Showing highlight ${String(index + 1)} of ${String(HIGHLIGHTS.length)}`}
      </p>
      <button
        type="button"
        className="w-fit rounded-md border border-solid border-input-border bg-surface px-3 py-2 text-body-default text-primary"
        onClick={() => {
          setIndex(0);
        }}
      >
        Back to the first highlight
      </button>
    </div>
  );
}

import { Carousel, CarouselSlide } from "@nexera-ui/react";

export function RTL() {
  return (
    <div dir="rtl" lang="ar" className="max-w-xl">
      <Carousel
        className="max-w-xl"
        aria-label="أبرز المستجدات"
        labels={{
          previous: "الشريحة السابقة",
          next: "الشريحة التالية",
          play: "بدء العرض التلقائي",
          pause: "إيقاف العرض التلقائي",
          controls: "عناصر التحكم في الشرائح",
          slides: "الشرائح",
          indicators: "اختيار شريحة",
        }}
        getSlideLabel={(index, count) => `${String(index + 1)} من ${String(count)}`}
        getIndicatorLabel={(index, count) =>
          `الانتقال إلى الشريحة ${String(index + 1)} من ${String(count)}`
        }
        autoPlay
        defaultPlaying={false}
      >
        {[
          ["أسبوع الترحيب", "تعرّف على زميلك المرشد في اليوم الثاني."],
          ["المزايا", "سجّل قبل نهاية الشهر."],
          ["الإجازات", "اطلب إجازتك من صفحة الإجازات."],
        ].map(([title, text]) => (
          <CarouselSlide key={title}>
            <div className="box-border h-full rounded-lg bg-status-info-bg p-6">
              <h3 className="m-0 text-heading-h4 text-primary">{title}</h3>
              <p className="m-0 mt-1 text-body-default text-primary">{text}</p>
            </div>
          </CarouselSlide>
        ))}
      </Carousel>
    </div>
  );
}

import { Carousel, CarouselSlide } from "@nexera-ui/react";

const manySlides = Array.from({ length: 12 }, (_, index) => (
  <CarouselSlide key={index}>
    <div className="box-border h-full rounded-lg bg-brand-subtle p-4">
      <h3 className="m-0 text-heading-h4 text-primary">{`Tip ${String(index + 1)}`}</h3>
      <p className="m-0 mt-1 text-body-default text-primary">Keep slides short.</p>
    </div>
  </CarouselSlide>
));

export function NarrowContainer() {
  return (
    <div className="flex flex-wrap items-start gap-8">
      <div className="w-60 max-w-full">
        <Carousel
          className="max-w-xl"
          aria-label="Narrow column"
          slidesPerView={{ base: 1, sm: 2 }}
        >
          {manySlides}
        </Carousel>
      </div>
      <div className="w-full max-w-2xl">
        <Carousel className="max-w-xl" aria-label="Wide column" slidesPerView={{ base: 1, sm: 2 }}>
          {manySlides}
        </Carousel>
      </div>
    </div>
  );
}