Tabs

import { useState } from "react";
import { Tab, Tabs, TabsList, TabsPanel } from "@/components/ui/98/tabs";

export function Example() {
  const [selected, setSelected] = useState<"general" | "advanced">("general");

  return (
    <Tabs>
      <TabsList>
        <Tab
          selected={selected === "general"}
          onClick={() => setSelected("general")}
        >
          General
        </Tab>
        <Tab
          selected={selected === "advanced"}
          onClick={() => setSelected("advanced")}
        >
          Advanced
        </Tab>
      </TabsList>
      <TabsPanel>
        {selected === "general" ? "General settings" : "Advanced settings"}
      </TabsPanel>
    </Tabs>
  );
}