News items, with the position as text

// apps/docs/examples/ui/carousel.tsx'use client';
import {useEffect, useState} from 'react';
import {  Card,  CardContent,} from '@workspace/active-ui/components/primitives/card';import {  Carousel,  CarouselContent,  CarouselItem,  CarouselNext,  CarouselPrevious,  type CarouselApi,} from '@workspace/active-ui/components/primitives/carousel';
const SLIDES = [  'Statements go out on 1 November',  'New: the participant portal in German',  'Rates for 2027 are published',  'The annual report 2025 is available',];
/** * Slides that scroll sideways, one at a time: by the buttons, by swiping, * or with the arrow keys while the carousel has focus. `setApi` hands over * Embla's API, here to show the position as text. */export default function CarouselExample() {  const [api, setApi] = useState<CarouselApi>();  const [current, setCurrent] = useState(1);  useEffect(() => {    if (!api) return;    const update = () => setCurrent(api.selectedScrollSnap() + 1);    update();    api.on('select', update);    return () => {      api.off('select', update);    };  }, [api]);  return (    <div className="flex w-full flex-col items-center gap-3 px-12">      <Carousel        setApi={setApi}        className="w-full max-w-xs"        aria-label="News"        roleDescription="carousel"        slideRoleDescription="slide"      >        <CarouselContent>          {SLIDES.map((text, index) => (            <CarouselItem              key={text}              aria-label={`${index + 1} of ${SLIDES.length}`}            >              <Card>                <CardContent className="flex aspect-[3/2] items-center justify-center text-center font-medium">                  {text}                </CardContent>              </Card>            </CarouselItem>          ))}        </CarouselContent>        <CarouselPrevious label="Previous news item" />        <CarouselNext label="Next news item" />      </Carousel>      <p className="text-muted-foreground text-sm" aria-live="polite">        Item {current} of {SLIDES.length}      </p>    </div>  );}