CarouselControls

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

<CarouselControls count={5} defaultIndex={1} aria-label="Team photos" type="arrows-and-play" />;

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

const PHOTO = `data:image/svg+xml,${encodeURIComponent(
  '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 225"><rect width="400" height="225" fill="lightsteelblue"/>' +
    '<path d="M0 170 L120 100 L210 160 L290 120 L400 170 L400 225 L0 225 Z" fill="seagreen"/></svg>',
)}`;

export function OnMedia() {
  return (
    <div className="relative w-full max-w-md overflow-hidden rounded-lg">
      <img src={PHOTO} alt="" className="block aspect-video w-full object-cover" />
      <CarouselControls
        count={5}
        defaultIndex={1}
        aria-label="Team photos"
        type="arrows-and-play"
        surface="on-media"
        className="absolute bottom-3 end-3"
      />
    </div>
  );
}

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

<CarouselControls count={5} defaultIndex={4} aria-label="Team photos" isLooping />;

import { useEffect, useId, useState } from "react";
import { useFocusWithin, useHover } from "react-aria";
import { Carousel, CarouselControls, CarouselIndicator } from "@nexera-ui/react";

export function CarouselRecipe() {
  const slides = [
    { 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" },
  ];
  function Carousel() {
    const slidesId = useId();
    const [index, setIndex] = useState(0);
    const [isPlaying, setPlaying] = useState(
      () => !window.matchMedia("(prefers-reduced-motion: reduce)").matches,
    );
    // Rotation stops while the pointer or keyboard focus is in the carousel.
    const { hoverProps, isHovered } = useHover({});
    const [isFocusWithin, setFocusWithin] = useState(false);
    const { focusWithinProps } = useFocusWithin({ onFocusWithinChange: setFocusWithin });
    const rotating = isPlaying && !isHovered && !isFocusWithin;
    useEffect(() => {
      if (!rotating) return undefined;
      const timer = window.setInterval(() => {
        setIndex((current) => (current + 1) % slides.length);
      }, 5000);
      return () => {
        window.clearInterval(timer);
      };
    }, [rotating]);
    return (
      <section
        aria-roledescription="carousel"
        aria-label="Onboarding highlights"
        className="flex w-full max-w-xl flex-col gap-3"
        {...mergeProps(hoverProps, focusWithinProps)}
      >
        <div className="flex flex-wrap items-center justify-between gap-3">
          <CarouselControls
            type="arrows-and-play"
            count={slides.length}
            index={index}
            onIndexChange={setIndex}
            isLooping
            isPlaying={isPlaying}
            onPlayingChange={setPlaying}
            slidesId={slidesId}
          />
          <CarouselIndicator
            count={slides.length}
            index={index}
            onIndexChange={setIndex}
            slidesId={slidesId}
            aria-label="Choose a slide"
          />
        </div>
        <div id={slidesId} aria-live={rotating ? "off" : "polite"}>
          {slides.map((slide, slideIndex) => (
            <div
              key={slide.title}
              role="group"
              aria-roledescription="slide"
              aria-label={`${String(slideIndex + 1)} of ${String(slides.length)}`}
              hidden={slideIndex !== index}
              className={`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-secondary">{slide.text}</p>
            </div>
          ))}
        </div>
      </section>
    );
  }
  return <Carousel />;
}