feat(#68): add tabs component

- add a component for it
- add it to storybook

dashboard/src/components/Tabs/Tabs.stories.tsx

@@ -0,0 +1,27 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import TabsComponent, { ITabItem } from './Tabs';
+
+const meta = {
+  title: 'Tabs',
+  component: TabsComponent,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+} satisfies Meta<typeof TabsComponent>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const tabs: ITabItem[] = [
+  { name: 'Boots', content: <span>Boots</span> },
+  { name: 'Tests', content: <span>Tests</span>, disabled: true },
+  { name: 'Builds', content: <span>Builds</span> },
+];
+export const Default: Story = {
+  args: {
+    tabs: tabs,
+    defaultTab: tabs[0],
+  },
+};

dashboard/src/components/Tabs/Tabs.tsx

@@ -0,0 +1,45 @@
+import { ReactElement, useMemo } from 'react';
+
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
+
+export interface ITabItem {
+  name: string;
+  content: ReactElement;
+  disabled?: boolean;
+}
+
+export interface ITabsComponent {
+  tabs: ITabItem[];
+  defaultTab: ITabItem;
+}
+
+const TabsComponent = ({ defaultTab, tabs }: ITabsComponent): JSX.Element => {
+  const tabsTrigger = useMemo(
+    () =>
+      tabs.map(tab => (
+        <TabsTrigger disabled={tab.disabled} key={tab.name} value={tab.name}>
+          {tab.name}
+        </TabsTrigger>
+      )),
+    [tabs],
+  );
+
+  const tabsContent = useMemo(
+    () =>
+      tabs.map(tab => (
+        <TabsContent key={tab.name} value={tab.name}>
+          {tab.content}
+        </TabsContent>
+      )),
+    [tabs],
+  );
+
+  return (
+    <Tabs defaultValue={defaultTab.name} className="w-full">
+      <TabsList>{tabsTrigger}</TabsList>
+      {tabsContent}
+    </Tabs>
+  );
+};
+
+export default TabsComponent;