增加Tabs导航功能。

src/components/Tab.tsx

@@ -0,0 +1,30 @@
+import cx from 'clsx';
+import { isEqual } from 'lodash-es';
+import { useCallback, useState } from 'react';
+import styles from './Tabs.module.css';
+
+type TabProps = {
+  tabs: { title: string; id: unknown }[];
+  onActive?: (id: unknown) => void;
+};
+
+export function Tab({ tabs = [], onActive }: TabProps) {
+  const [active, setActive] = useState(0);
+  const handleActivate = useCallback((index: number) => {
+    setActive(index);
+    onActive?.(tabs[index].id);
+  }, []);
+
+  return (
+    <div className={styles.tabs_container}>
+      {tabs.map((tab, index) => (
+        <div
+          key={`tab_${index}_${tab.id}`}
+          className={cx(styles.tab, isEqual(index, active) && styles.actived)}
+          onClick={() => handleActivate(index)}>
+          {tab.title}
+        </div>
+      ))}
+    </div>
+  );
+}

src/components/Tabs.module.css

@@ -0,0 +1,22 @@
+@layer components {
+  .tabs_container {
+    width: 100%;
+    padding-inline: var(--spacing-m);
+    border-bottom: 1px solid var(--color-border);
+    display: flex;
+    gap: calc(var(--spacing) * 4);
+  }
+  .tab {
+    border-bottom: calc(var(--spacing) * 2) solid transparent;
+    padding-inline: var(--spacing-l);
+    padding-block: var(--spacing-xs);
+    font-size: var(--font-size-s);
+    &.actived {
+      color: var(--color-primary);
+      border-bottom-color: var(--color-primary);
+    }
+    &:hover {
+      color: var(--color-primary-hover);
+    }
+  }
+}