Reshaped Tabs

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

function Component() {
  const [value, setValue] = React.useState("1");
  return (
    <Tabs value={value} onChange={({ value }) => setValue(value)}>
      <Tabs.List>
        <Tabs.Item value="1">Item 1</Tabs.Item>
        <Tabs.Item value="2">Item 2</Tabs.Item>
      </Tabs.List>
      {value === "1" && (
        <View padding={4}>
          <Tabs.Panel value="1">Tab 1</Tabs.Panel>
        </View>
      )}
      {value === "2" && (
        <View padding={4}>
          <Tabs.Panel value="2">Tab 2</Tabs.Panel>
        </View>
      )}
    </Tabs>
  );
}

export default function Demo() {
  return (
    <Reshaped theme="slate">
      <div style={{ maxWidth: 480, width: "100%", margin: "0 auto", padding: 24 }}>
        <Component />
      </div>
    </Reshaped>
  );
}