Tabs

import { Tab, TabList, TabPanel, Tabs } from '@snapshot-ui/react';
import type { ReactElement } from 'react';

export default function TabsBasic(): ReactElement {
  return (
    <div style={{ width: '100%' }}>
      <Tabs defaultSelectedKey="spending">
        <TabList aria-label="Transactions">
          <Tab id="all">All</Tab>
          <Tab id="spending">Spending</Tab>
          <Tab id="income">Income</Tab>
          <Tab id="transfers">Transfers</Tab>
        </TabList>
        <TabPanel id="all">
          <p>Every transaction this month, newest first.</p>
        </TabPanel>
        <TabPanel id="spending">
          <p>Money out: card payments, bills and transfers you sent.</p>
        </TabPanel>
        <TabPanel id="income">
          <p>Money in: salary, refunds and transfers you received.</p>
        </TabPanel>
        <TabPanel id="transfers">
          <p>Moves between your own accounts, which are neither.</p>
        </TabPanel>
      </Tabs>
    </div>
  );
}

'use client';

import { RouterProvider, Tab, TabList, TabPanel, Tabs } from '@snapshot-ui/react';
import { usePathname, useRouter, useSearchParams } from 'next/navigation';
import { Suspense, type ReactElement } from 'react';

const VIEWS = [
  { id: 'all', name: 'All', content: 'Every transaction this month, newest first.' },
  { id: 'spending', name: 'Spending', content: 'Money out: card payments, bills and transfers you sent.' },
  { id: 'income', name: 'Income', content: 'Money in: salary, refunds and transfers you received.' },
] as const;

function ViewTabs({ view }: { view: string }): ReactElement {
  const pathname = usePathname();
  const current = VIEWS.find(({ id }) => id === view) ?? VIEWS[0];
  return (
    // The URL holds the selection; the arrows only move focus, and Enter or Space follows the focused tab's link.
    <Tabs selectedKey={current.id} keyboardActivation="manual">
      <TabList aria-label="Transactions">
        {VIEWS.map(({ id, name }) => (
          <Tab key={id} id={id} href={`${pathname}?view=${id}`}>
            {name}
          </Tab>
        ))}
      </TabList>
      {/* One panel, the route's content, with the selected key as its id. */}
      <TabPanel id={current.id}>
        <p>{current.content}</p>
      </TabPanel>
    </Tabs>
  );
}

function ViewFromUrl(): ReactElement {
  return <ViewTabs view={useSearchParams().get('view') ?? 'all'} />;
}

export default function TabsLinks(): ReactElement {
  const router = useRouter();
  // An app wraps its whole tree once; the example wraps only itself.
  return (
    <div style={{ width: '100%' }}>
      <RouterProvider
        navigate={(href) => {
          router.push(href, { scroll: false });
        }}
      >
        {/* The page is static, so the server renders the fallback: the same tabs at the first view. */}
        <Suspense fallback={<ViewTabs view="all" />}>
          <ViewFromUrl />
        </Suspense>
      </RouterProvider>
    </div>
  );
}

import { Badge, Tab, TabList, TabPanel, Tabs } from '@snapshot-ui/react';
import type { ReactElement } from 'react';

export default function TabsChanged(): ReactElement {
  return (
    <div style={{ width: '100%' }}>
      <Tabs defaultSelectedKey="general">
        <TabList aria-label="Settings">
          <Tab id="general">General</Tab>
          {/* The panel holds unsaved edits: the clay dot, read as "Changed". */}
          <Tab id="rules" isChanged>
            Rules
          </Tab>
          {/* A count is part of the tab's name, in a Badge, never in clay. */}
          <Tab id="review">
            To review <Badge>3</Badge>
          </Tab>
        </TabList>
        <TabPanel id="general">
          <p>Your name, your currency and the day your month starts.</p>
        </TabPanel>
        <TabPanel id="rules">
          <p>Two rules edited and not saved yet.</p>
        </TabPanel>
        <TabPanel id="review">
          <p>Three transactions no rule has sorted.</p>
        </TabPanel>
      </Tabs>
    </div>
  );
}

import { Tab, TabList, TabPanel, Tabs } from '@snapshot-ui/react';
import type { ReactElement } from 'react';

const VIEWS = ['All', 'Spending', 'Income', 'Transfers', 'Bills', 'Subscriptions', 'Refunds', 'Archived'];

export default function TabsOverflow(): ReactElement {
  return (
    <div style={{ width: '100%', maxWidth: '24rem' }}>
      <Tabs defaultSelectedKey="archived">
        <TabList aria-label="Transactions">
          {VIEWS.map((view) => (
            <Tab key={view} id={view.toLowerCase()}>
              {view}
            </Tab>
          ))}
        </TabList>
        {VIEWS.map((view) => (
          <TabPanel key={view} id={view.toLowerCase()}>
            <p>{`The ${view.toLowerCase()} view.`}</p>
          </TabPanel>
        ))}
      </Tabs>
    </div>
  );
}