feat: create tab and selector components

inertia/components/common/tabs/tab_item.tsx

@@ -0,0 +1,24 @@
+import styled from '@emotion/styled';
+import { rgba } from '~/lib/color';
+
+const TabItem = styled.li<{ active?: boolean; danger?: boolean }>(
+  ({ theme, active, danger }) => {
+    const activeColor = !danger ? theme.colors.primary : theme.colors.lightRed;
+    return {
+      userSelect: 'none',
+      cursor: 'pointer',
+      backgroundColor: active
+        ? rgba(activeColor, 0.15)
+        : theme.colors.secondary,
+      padding: '10px 20px',
+      border: `1px solid ${active ? rgba(activeColor, 0.1) : theme.colors.secondary}`,
+      borderBottom: `1px solid ${active ? rgba(activeColor, 0.25) : theme.colors.secondary}`,
+      display: 'flex',
+      gap: '0.35em',
+      alignItems: 'center',
+      transition: '.075s',
+    };
+  }
+);
+
+export default TabItem;

inertia/components/common/tabs/tab_list.tsx

@@ -0,0 +1,10 @@
+import styled from '@emotion/styled';
+
+const TabList = styled.ul({
+  padding: 0,
+  margin: 0,
+  display: 'flex',
+  listStyle: 'none',
+});
+
+export default TabList;

inertia/components/common/tabs/tab_panel.tsx

@@ -0,0 +1,12 @@
+import styled from '@emotion/styled';
+import { rgba } from '~/lib/color';
+
+const TabPanel = styled.div(({ theme }) => ({
+  zIndex: 1,
+  position: 'relative',
+  border: `1px solid ${rgba(theme.colors.primary, 0.25)}`,
+  padding: '20px',
+  marginTop: '-1px',
+}));
+
+export default TabPanel;

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>
+  );
+}