From 3ef90f57b81073c768a1fe915acd44385f028843 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=BE=90=E6=B6=9B?= <midnite@outlook.com>
Date: Fri, 27 Dec 2024 16:46:25 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A2=9E=E5=8A=A0Tabs=E5=AF=BC=E8=88=AA?=
 =?UTF-8?q?=E5=8A=9F=E8=83=BD=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Tab.tsx         | 30 ++++++++++++++++++++++++++++++
 src/components/Tabs.module.css | 22 ++++++++++++++++++++++
 2 files changed, 52 insertions(+)
 create mode 100644 src/components/Tab.tsx
 create mode 100644 src/components/Tabs.module.css

diff --git a/src/components/Tab.tsx b/src/components/Tab.tsx
new file mode 100644
index 0000000..572a580
--- /dev/null
+++ b/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>
+  );
+}
diff --git a/src/components/Tabs.module.css b/src/components/Tabs.module.css
new file mode 100644
index 0000000..d2d0581
--- /dev/null
+++ b/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);
+    }
+  }
+}