Tab.spec.md

Option A

import { Tabs } from "ui-library";
import { css } from "ui-library/stitches.config";
import { useRouter } from "next/router";

export function OptionA() {
  const router = useRouter();

  return (
    <Tabs>
      {[
        {
          label: "Home",
          href: "/home",
          isActive: router.pathname === "/href",
        },
        {
          label: "Settings",
          href: "/settings",
          isActive: router.pathname === "/settings",
        },
      ].map((tab, idx) =>  <Tabs.Item key={idx} {...tab} />)}
    </Tabs>
  );
}

Option B

import { Tabs } from "ui-library";
import { css } from "ui-library/stitches.config";
import { useRouter } from "next/router";

export function OptionB() {
  const router = useRouter();

  return (
    <Tabs
      items={[
        {
          label: "Home",
          href: "/home",
          isActive: router.pathname === "/href",
        },
        {
          label: "Settings",
          href: "/settings",
          isActive: router.pathname === "/settings",
        },
      ]}
    />
  );
}