feat: implemented the substabs list component (#3352)

components/TabList/tab-list.stories.tsx

@@ -0,0 +1,28 @@
+import { Meta, StoryObj } from "@storybook/react";
+import { SubTabsList } from "./tab-list";
+
+type Story = StoryObj<typeof SubTabsList>;
+
+const meta: Meta<typeof SubTabsList> = {
+  title: "Components/Shared/SubTabsList",
+  component: SubTabsList,
+  args: {
+    label: "Sub Tabs Example",
+    textSize: "regular",
+    tabList: [
+      { name: "Tab 1", path: "tab1" },
+      { name: "Tab 2", path: "tab2" },
+      { name: "Tab 3", path: "tab3" },
+    ],
+    selectedTab: "tab 1",
+  },
+};
+
+export default meta;
+
+export const Default: Story = {};
+export const SmallText: Story = {
+  args: {
+    textSize: "small",
+  },
+};

components/TabList/tab-list.tsx

@@ -1,26 +1,31 @@
 import React from "react";
 
+import Link from "next/link";
+import clsx from "clsx";
 import TabListItem from "./tab-list-item";
 
 type TabItem = {
   name: string;
   path: string;
-  numOf?: number;
 };
 
-interface NavProps {
+interface TabListProps {
   tabList: TabItem[];
   selectedTab: string;
   pageId?: string;
 }
 
-const TabList: React.FC<NavProps> = ({ tabList, pageId, selectedTab }) => {
+interface SubTabsListProps extends TabListProps {
+  label: string;
+  textSize?: "small" | "regular";
+}
+
+const TabList = ({ tabList, pageId, selectedTab }: TabListProps) => {
   return (
     <nav
       role="tablist"
       aria-orientation="horizontal"
       aria-label="Browse the tools"
-      tabIndex={0}
       className="tool-list-nav flex w-full overflow-x-auto overflow-y-hidden gap-2"
     >
       {tabList.map((tab, index) => (
@@ -43,4 +48,33 @@ const TabList: React.FC<NavProps> = ({ tabList, pageId, selectedTab }) => {
   );
 };
 
+export const SubTabsList = ({ tabList, pageId, selectedTab, label, textSize }: SubTabsListProps) => {
+  return (
+    <nav
+      role="tablist"
+      aria-label={label}
+      className={clsx(
+        "flex items-center w-max overflow-x-auto overflow-y-hidden gap-2 bg-light-slate-3 p-1 rounded",
+        textSize === "small" && "text-sm"
+      )}
+    >
+      {tabList.map((tab, index) => {
+        const isSelected = selectedTab === tab.name.toLowerCase();
+
+        return (
+          <div
+            role="tab"
+            aria-selected={isSelected ? "true" : "false"}
+            data-state={isSelected ? "active" : "inactive"}
+            key={index}
+            className={clsx(isSelected && "bg-white shadow", "rounded py-1 px-2", !isSelected && "text-light-slate-11")}
+          >
+            <Link href={`${pageId ? `${pageId}/` : ""}${tab.path}`}>{tab.name}</Link>
+          </div>
+        );
+      })}
+    </nav>
+  );
+};
+
 export default TabList;