feat: create tab and selector components

inertia/components/common/tabs/tabs.tsx

@@ -0,0 +1,42 @@
+import { ReactNode, useState } from 'react';
+import { IconType } from 'react-icons/lib';
+import TabItem from '~/components/common/tabs/tab_item';
+import TabList from '~/components/common/tabs/tab_list';
+import TabPanel from '~/components/common/tabs/tab_panel';
+import TransitionLayout from '~/components/layouts/_transition_layout';
+
+export interface Tab {
+  title: string;
+  content: ReactNode;
+  icon?: IconType;
+  danger?: boolean;
+}
+
+export default function Tabs({ tabs }: { tabs: Tab[] }) {
+  const [activeTabIndex, setActiveTabIndex] = useState<number>(0);
+
+  const handleTabClick = (index: number) => {
+    setActiveTabIndex(index);
+  };
+
+  return (
+    <div css={{ width: '100%' }}>
+      <TabList>
+        {tabs.map(({ title, icon: Icon, danger }, index) => (
+          <TabItem
+            key={index}
+            active={index === activeTabIndex}
+            onClick={() => handleTabClick(index)}
+            danger={danger ?? false}
+          >
+            {!!Icon && <Icon size={20} />}
+            {title}
+          </TabItem>
+        ))}
+      </TabList>
+      <TabPanel key={tabs[activeTabIndex].title}>
+        <TransitionLayout>{tabs[activeTabIndex].content}</TransitionLayout>
+      </TabPanel>
+    </div>
+  );
+}