Reshaped Tabs

import { Reshaped, View } from "reshaped/bundle";
import Tabs from "@/components/ui/reshaped-tabs";

export default function Demo() {
  return (
    <Reshaped theme="slate">
      <div style={{ maxWidth: 480, width: "100%", margin: "0 auto", padding: 24 }}>
        <View gap={3}>
          <Tabs variant="pills" defaultValue="1">
            <Tabs.List>
              <Tabs.Item value="1">Item 1</Tabs.Item>
              <Tabs.Item value="2">Long item 2</Tabs.Item>
              <Tabs.Item value="3">Very long item 3</Tabs.Item>
            </Tabs.List>
          </Tabs>
          <Tabs variant="pills-raised" defaultValue="1">
            <Tabs.List>
              <Tabs.Item value="1">Item 1</Tabs.Item>
              <Tabs.Item value="2">Long item 2</Tabs.Item>
              <Tabs.Item value="3">Very long item 3</Tabs.Item>
            </Tabs.List>
          </Tabs>
        </View>
      </div>
    </Reshaped>
  );
}