Segmented control

"use client";

import { useState } from "react";

import { SegmentedControl, SegmentedControlItem } from "@/components/ui/segmented-control";

export default function SegmentedControlExample() {
  const [billing, setBilling] = useState("monthly");

  return (
    <SegmentedControl
      aria-label="Billing"
      value={billing}
      onValueChange={(value) => value && setBilling(value)}
    >
      <SegmentedControlItem value="monthly">Monthly</SegmentedControlItem>
      <SegmentedControlItem value="quarterly">Quarterly</SegmentedControlItem>
      <SegmentedControlItem value="yearly">Yearly</SegmentedControlItem>
    </SegmentedControl>
  );
}

import { Text } from "@/components/typography";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";

export default function TabsExample() {
  return (
    <Tabs defaultValue="ads" className="items-center">
      <TabsList>
        <TabsTrigger value="ads">Ads</TabsTrigger>
        <TabsTrigger value="organic">Organic</TabsTrigger>
        <TabsTrigger value="podcasts">Podcasts</TabsTrigger>
      </TabsList>
      <TabsContent value="ads">
        <Text tone="secondary">Paid social ads, cut for every placement.</Text>
      </TabsContent>
      <TabsContent value="organic">
        <Text tone="secondary">Short-form videos for your own channels.</Text>
      </TabsContent>
      <TabsContent value="podcasts">
        <Text tone="secondary">Clips and sponsor reads from long episodes.</Text>
      </TabsContent>
    </Tabs>
  );
}