Tabs

"use client";

import { Tab, TabList, TabPanel, Tabs } from "@/components/miyuki-ui/tabs";

export default function TabsDemo() {
  return (
    <Tabs className="w-full max-w-lg">
      <TabList aria-label="Hakuba valley">
        <Tab id="stations" count={24}>
          Stations
        </Tab>
        <Tab id="alerts" count={3}>
          Alerts
        </Tab>
        <Tab id="routes" count={61}>
          Routes
        </Tab>
      </TabList>
      <TabPanel id="stations" className="min-h-10 text-muted-foreground">
        Snow depth, wind and temperature from every station in the valley, refreshed every ten minutes.
      </TabPanel>
      <TabPanel id="alerts" className="min-h-10 text-muted-foreground">
        Three warnings are active: wind above the tree line, one road closure and a delayed first lift.
      </TabPanel>
      <TabPanel id="routes" className="min-h-10 text-muted-foreground">
        Marked routes with today&apos;s conditions, from the valley floor to the Shirouma ridge.
      </TabPanel>
    </Tabs>
  );
}

"use client";

import { Tab, TabList, TabPanel, Tabs } from "@/components/miyuki-ui/tabs";

export default function TabsPillDemo() {
  return (
    <Tabs variant="pill" className="w-full max-w-md">
      <TabList aria-label="Hakuba weather">
        <Tab id="overview">Overview</Tab>
        <Tab id="forecast">Forecast</Tab>
        <Tab id="history">History</Tab>
      </TabList>
      <TabPanel id="overview" className="min-h-10 text-muted-foreground">
        −6 °C at the summit, light snow easing by noon. Winds 18 km/h from the north-west.
      </TabPanel>
      <TabPanel id="forecast" className="min-h-10 text-muted-foreground">
        34 cm of new snow expected over the next three days, heaviest on Thursday night.
      </TabPanel>
      <TabPanel id="history" className="min-h-10 text-muted-foreground">
        This is the deepest base for mid-January since 2018, at 212 cm on the upper slopes.
      </TabPanel>
    </Tabs>
  );
}

"use client";

import { Tab, TabList, TabPanel, Tabs } from "@/components/miyuki-ui/tabs";

export default function TabsVerticalDemo() {
  return (
    <Tabs orientation="vertical" className="w-full max-w-lg">
      <TabList aria-label="Account settings">
        <Tab id="profile">Profile</Tab>
        <Tab id="alerts" count={3}>
          Alerts
        </Tab>
        <Tab id="billing">Billing</Tab>
      </TabList>
      <TabPanel id="profile" className="text-muted-foreground">
        Your name, photo and the regions you follow.
      </TabPanel>
      <TabPanel id="alerts" className="text-muted-foreground">
        Three regions send powder alerts: Niseko, Hakuba and Nozawa.
      </TabPanel>
      <TabPanel id="billing" className="text-muted-foreground">
        The season pass renews on 1 December for ¥118,000.
      </TabPanel>
    </Tabs>
  );
}