Tabs

import { CruiseTabs } from "@/components/cruise/tabs";

export default function TabsExample() {
  return (
    <div className="flex flex-col gap-10">
      <CruiseTabs
        label="Product details"
        items={[
          { value: "details", label: "Details", content: <p>Three layers of vanilla sponge. Serves 12.</p> },
          { value: "reviews", label: "Reviews", content: <p>4.8 out of 5 from 126 reviews.</p> },
          { value: "delivery", label: "Delivery", content: <p>Same-day delivery in Lagos.</p> },
        ]}
      />
      <CruiseTabs
        variant="boxed"
        label="Settings"
        items={[
          { value: "profile", label: "Profile", content: <p>Your name, photo and phone number.</p> },
          { value: "security", label: "Security", content: <p>Password and two-step sign-in.</p> },
        ]}
      />
      <CruiseTabs
        variant="pill"
        label="Filter products"
        items={[
          { value: "all", label: "All", content: <p>Showing all 48 products.</p> },
          { value: "cakes", label: "Cakes", content: <p>Showing 18 cakes.</p> },
          { value: "drinks", label: "Drinks", content: <p>Showing 8 drinks.</p> },
        ]}
      />
    </div>
  );
}