From dada0575c3b020220699af2b851f8dca6c7b8fae Mon Sep 17 00:00:00 2001
From: "tangly1024.com" <tlyong1992@hotmail.com>
Date: Thu, 2 Feb 2023 14:17:45 +0800
Subject: [PATCH] =?UTF-8?q?tabs=20=E5=AE=BD=E5=BA=A6=E3=80=81=E5=8A=A8?=
 =?UTF-8?q?=E6=95=88?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/Tabs.js | 47 +++++++++++++++++++++++++---------------------
 1 file changed, 26 insertions(+), 21 deletions(-)

diff --git a/components/Tabs.js b/components/Tabs.js
index 9057f20e..f86f0b70 100644
--- a/components/Tabs.js
+++ b/components/Tabs.js
@@ -27,34 +27,39 @@ const Tabs = ({ className, children }) => {
 
   if (count === 1) {
     return <section className={'duration-200 ' + className}>
-      {children}
-    </section>
+            {children}
+        </section>
   }
 
-  function tabClickHandle (i) {
+  function tabClickHandle(i) {
     setCurrentTab(i)
   }
 
   return <div className={'mb-5 duration-200 ' + className}>
-    <ul className='flex justify-center space-x-5 pb-4 dark:text-gray-400 text-gray-600'>
-      {children.map((item, index) => {
-        return <li key={index}
-                   className={(currentTab === index ? 'font-black border-b-2 border-red-400 text-red-400 animate__animated animate__jello ' : 'font-extralight cursor-pointer') + ' text-sm font-sans '}
-                   onClick={() => {
-                     tabClickHandle(index)
-                   }}>
-          {item?.key}
-        </li>
-      })}
-    </ul>
-    <div>
-      {children.map((item, index) => {
-        return <section key={index} className={ 'animate__animated animate__fadeIn animate__faster'}>
-          {currentTab === index && item}
-        </section>
-      })}
+        <ul className='flex justify-center space-x-5 pb-4 dark:text-gray-400 text-gray-600 overflow-auto'>
+            {children.map((item, index) => {
+              return <li key={index}
+                    className={(currentTab === index ? 'font-black border-b-2 border-red-400 text-red-400 animate__animated animate__jello ' : 'font-extralight cursor-pointer') + ' text-sm font-sans '}
+                    onClick={() => {
+                      tabClickHandle(index)
+                    }}>
+                    {item?.key}
+                </li>
+            })}
+        </ul>
+        <div>
+            {children.map((item, index) => {
+              return <section key={index}
+                    data-aos="fade-up"
+                    data-aos-duration="600"
+                    data-aos-easing="ease-in-out"
+                    data-aos-once="false"
+                    data-aos-anchor-placement="top-bottom">
+                    {currentTab === index && item}
+                </section>
+            })}
+        </div>
     </div>
-  </div>
 }
 
 export default Tabs