Fluid Carousel

import { Carousel, type CarouselItem } from "@/components/ui/carousel";
 
const updates: CarouselItem[] = [
  {
    id: "release-checklist",
    title: "Release checklist",
    description: "Keep the final handoff focused on the checks that prevent regressions.",
    content: (
      <ul className="rounded-md border divide-y divide-dashed">
        <li className="p-3">Database migration reviewed</li>
        <li className="p-3">Error states verified on mobile</li>
        <li className="p-3">Release notes shared with support</li>
      </ul>
    ),
  },
  {
    id: "handoff-brief",
    title: "Team handoff",
    description: "Package context, ownership, and the next action in one review card.",
    content: <div className="rounded-md border p-4">Design QA handoff</div>,
  },
];
 
export function ProductOperationsCarousel() {
  return <Carousel items={updates} ariaLabel="Product operations updates" />;
}

export type CarouselItem = {
  id: string;
  title: string;
  description?: string;
  content: React.ReactNode;
};