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