feat: chrome style tabs

Author: wkylin

src/components/stateless/FixTabs/index.jsx

@@ -0,0 +1,50 @@
+import React, { useState } from 'react'
+
+const FixTabs = () => {
+  // 定义tab数据
+  const tabs = [
+    { id: 1, label: '首页' },
+    { id: 2, label: '产品' },
+    { id: 3, label: '服务' },
+    { id: 4, label: '关于我们' },
+    { id: 5, label: '联系我们' },
+  ]
+
+  // 设置默认激活的tab
+  const [activeTab, setActiveTab] = useState(1)
+
+  // 切换tab的函数
+  const handleTabClick = (tabId) => {
+    setActiveTab(tabId)
+  }
+
+  return (
+    <div className="mx-auto mt-8 w-full max-w-3xl">
+      <div className="flex flex-wrap border-b border-gray-200">
+        {tabs.map((tab) => (
+          <button
+            key={tab.id}
+            className={`relative cursor-pointer px-2 ${
+              activeTab === tab.id ? 'rounded-tab text-blue-600' : 'text-gray-500 hover:text-gray-700'
+            }`}
+            onClick={() => handleTabClick(tab.id)}
+          >
+            <div className="flex items-center px-4 py-1">{tab.label}</div>
+          </button>
+        ))}
+      </div>
+
+      {/* Tab内容区域 */}
+      <div className="py-6">
+        {tabs.map((tab) => (
+          <div key={tab.id} className={activeTab === tab.id ? 'block' : 'hidden'}>
+            <h2 className="mb-4 text-xl font-bold">{tab.label}</h2>
+            <p>这是{tab.label}的内容区域。您可以在这里添加任何相关内容。</p>
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+}
+
+export default FixTabs

src/pages/demo/index.jsx

@@ -7,7 +7,8 @@ import FloatingIcon, { SocialIcon } from '@stateless/FloatingIcon'
 import GradientTracing from '@stateless/GradientTracing'
 import Footer from '@stateless/Footer'
 import StarBack from '@stateless/StarBackground'
-import OrbitingCirclesDemo from '@stateless/OrbitingCircles'
+// import OrbitingCirclesDemo from '@stateless/OrbitingCircles'
+import FixTabs from '@stateless/FixTabs'
 
 import StickyCard from '@stateless/StickyCard'
 import SpringPng from '@assets/images/spring.png'
@@ -16,9 +17,9 @@ import SongPng from '@assets/images/song.png'
 import XuePng from '@assets/images/xue.png'
 
 import { Command, Cannabis, Beer, Mail } from 'lucide-react'
-import ScriptView from '@stateless/ScriptView'
-import AnimatedList from '@stateless/AnimatedList'
-import { DraggableList, DraggableItem } from '@stateless/DraggableList'
+// import ScriptView from '@stateless/ScriptView'
+// import AnimatedList from '@stateless/AnimatedList'
+// import { DraggableList, DraggableItem } from '@stateless/DraggableList'
 import FixCarousel from '@stateless/FixCarouse'
 import styles from './index.module.less'
 
@@ -107,17 +108,18 @@ const dateDifference = (date1, date2) => {
 }
 
 const ProDemo = () => {
-  const [items, setItems] = useState([
-    { id: '1', content: <DraggableItem>First Item</DraggableItem> },
-    { id: '2', content: <DraggableItem>Second Item</DraggableItem> },
-    { id: '3', content: <DraggableItem>Third Item</DraggableItem> },
-  ])
-  const handleReorder = (newItems) => {
-    setItems(newItems)
-  }
+  // const [items, setItems] = useState([
+  //   { id: '1', content: <DraggableItem>First Item</DraggableItem> },
+  //   { id: '2', content: <DraggableItem>Second Item</DraggableItem> },
+  //   { id: '3', content: <DraggableItem>Third Item</DraggableItem> },
+  // ])
+  // const handleReorder = (newItems) => {
+  //   setItems(newItems)
+  // }
 
   return (
     <FixTabPanel>
+      <FixTabs />
       <FixCarousel />
       {/* <OrbitingCirclesDemo /> */}
       {/* <ScriptView showMultiplePackageOptions={true} codeLanguage="shell" commandMap={customCommandMap} /> */}

src/styles/reset.css

@@ -330,3 +330,20 @@ select:-webkit-autofill:active {
     transform: rotate(360deg);
   }
 }
+
+.rounded-tab {
+  --r: 12px;
+
+  padding-inline: 0.8em;
+  border-inline: var(--r) solid #0000;
+  border-radius: calc(2 * var(--r)) calc(2 * var(--r)) 0 0 / var(--r);
+  mask:
+    radial-gradient(var(--r) at var(--r) 0, #0000 98%, #000 101%) calc(-1 * var(--r)) 100%/100% var(--r) repeat-x,
+    conic-gradient(#000 0 0) padding-box;
+  background: #e1e1e1 border-box;
+  width: fit-content;
+}
+
+div[className*='cursor-pointer'] {
+  transition: all 0.2s ease-in-out;
+}