feat: abstract the Tabs component for optimization and transformed both tab interactives

Author: thekiranmahajan

src/components/ExperienceTabs.jsx

@@ -2,41 +2,18 @@ import { useState } from "react";
 import { EXPERIENCE_TABS, TAB_VARIANTS } from "../utils/constants";
 import { motion, AnimatePresence } from "motion/react";
 import Timeline from "./Timeline";
-import { spring } from "motion";
+import Tabs from "./Tabs";
 
 const ExperienceTabs = () => {
   const [activeTab, setActiveTab] = useState(EXPERIENCE_TABS[1]?.tabName);
   return (
     <div className="container mt-10 flex-col items-center p-2">
-      <div className="flex items-center justify-center gap-20">
-        {EXPERIENCE_TABS.map(({ tabName, tabIcon: Icon }) => (
-          <button
-            key={tabName}
-            onClick={() => setActiveTab(tabName)}
-            className={`${
-              activeTab === tabName
-                ? "text-white dark:!text-gray-900"
-                : "hover:opacity-70"
-            } relative flex items-center justify-center rounded-full px-4 py-2 font-medium text-dark-blue duration-300 md:text-lg dark:text-gray-100`}
-          >
-            {activeTab === tabName && (
-              <motion.div
-                layoutId="active-pill"
-                className="absolute inset-0 bg-light-blue dark:bg-custom-yellow"
-                style={{ borderRadius: 9999 }}
-                transition={{ type: spring, duration: 0.6 }}
-              />
-            )}
-
-            <span className="relative z-10 flex gap-3">
-              <Icon className="text-2xl" />
-              {tabName}
-            </span>
-          </button>
-        ))}
-      </div>
-
-      <div className="h-full w-full md:mt-2">
+      <Tabs
+        tabs={EXPERIENCE_TABS}
+        activeTab={activeTab}
+        setActiveTab={setActiveTab}
+      />
+      <div className="mx-auto h-full max-w-screen-lg">
         <AnimatePresence mode="wait">
           <motion.div
             key={activeTab}

src/components/SkillTabs.jsx

@@ -2,6 +2,7 @@ import { useState } from "react";
 import { motion, AnimatePresence } from "motion/react";
 import { SKILL_TABS, ALL_SKILLS, TAB_VARIANTS } from "../utils/constants";
 import SkillBar from "./SkillBar";
+import Tabs from "./Tabs";
 
 const SkillTabs = () => {
   const [activeTab, setActiveTab] = useState(SKILL_TABS[1]?.tabName);
@@ -10,33 +11,14 @@ const SkillTabs = () => {
   );
 
   return (
-    <div className="mt-10 flex h-full w-1/2 flex-col items-center justify-center p-2 md:w-3/4 lg:w-4/5">
-      <div className="mb-5 flex h-20 items-center justify-center gap-5 md:gap-10">
-        {SKILL_TABS.map(({ tabName, tabIcon: Icon }) => (
-          <button
-            key={tabName}
-            onClick={() => setActiveTab(tabName)}
-            className={`relative flex flex-col items-center justify-center gap-2 truncate p-2 pb-2 font-medium leading-5 md:text-lg md:leading-7 ${
-              activeTab === tabName
-                ? "text-custom-violet dark:text-custom-yellow"
-                : "text-gray-500 dark:text-gray-100"
-            }`}
-          >
-            <Icon
-              className={`text-2xl md:text-3xl ${activeTab === tabName ? "text-light-blue" : ""}`}
-            />
-            {tabName}
-            {activeTab === tabName && (
-              <motion.div
-                layoutId="underline"
-                className="absolute bottom-0 left-0 right-0 h-0.5 rounded bg-light-blue"
-              />
-            )}
-          </button>
-        ))}
-      </div>
+    <div className="container mt-10 flex-col items-center justify-center p-2">
+      <Tabs
+        tabs={SKILL_TABS}
+        activeTab={activeTab}
+        setActiveTab={setActiveTab}
+      />
 
-      <div className="h-full w-[17rem] sm:w-96 md:mt-2">
+      <div className="mx-auto h-full w-full max-w-screen-xs">
         <AnimatePresence mode="wait">
           <motion.div
             key={activeTab}

src/components/Tabs.jsx

@@ -0,0 +1,35 @@
+import { motion } from "motion/react";
+
+const Tabs = ({ tabs, activeTab, setActiveTab }) => {
+  return (
+    <div className="mx-auto mb-10 flex max-w-screen-sm items-center justify-between">
+      {tabs.map(({ tabName, tabIcon: Icon }) => (
+        <button
+          key={tabName}
+          onClick={() => setActiveTab(tabName)}
+          className={`${
+            activeTab === tabName
+              ? "text-white dark:!text-gray-900"
+              : "hover:opacity-70"
+          } relative flex items-center justify-center rounded-full px-4 py-2 font-medium text-dark-blue duration-300 md:text-lg dark:text-gray-100`}
+        >
+          {activeTab === tabName && (
+            <motion.div
+              layoutId="active-pill"
+              className="absolute inset-0 bg-light-blue dark:bg-custom-yellow"
+              style={{ borderRadius: 9999 }}
+              transition={{ type: "spring", duration: 0.6 }}
+            />
+          )}
+
+          <span className="relative z-10 flex flex-wrap items-center justify-center gap-2 sm:gap-3">
+            <Icon className="text-2xl" />
+            {tabName}
+          </span>
+        </button>
+      ))}
+    </div>
+  );
+};
+
+export default Tabs;

src/utils/constants.js

@@ -123,49 +123,49 @@ export const ALL_SKILLS = [
     styles: "bg-[#08D9FF]",
     icon: FaReact,
     percentage: 80,
-    category: "Libraries & Frameworks",
+    category: "Frameworks",
   },
   {
     logoName: "Tailwind CSS",
     styles: "bg-[#38BDF8]",
     icon: RiTailwindCssFill,
     percentage: 97,
-    category: "Libraries & Frameworks",
+    category: "Frameworks",
   },
   {
     logoName: "Node.js",
     styles: "bg-[#5FAE4B]",
     icon: IoLogoNodejs,
     percentage: 60,
-    category: "Libraries & Frameworks",
+    category: "Frameworks",
   },
   {
     logoName: "Redux",
     styles: "bg-[#7A50BE]",
     icon: SiRedux,
     percentage: 60,
-    category: "Libraries & Frameworks",
+    category: "Frameworks",
   },
   {
     logoName: "Babel",
     styles: "bg-[#F5DF63]",
     icon: SiBabel,
     percentage: 70,
-    category: "Libraries & Frameworks",
+    category: "Frameworks",
   },
   {
     logoName: "Webpack",
     styles: "bg-[#92D6FA]",
     icon: SiWebpack,
     percentage: 70,
-    category: "Libraries & Frameworks",
+    category: "Frameworks",
   },
   {
     logoName: "Vite",
     styles: "bg-[#9F61FC]",
     icon: SiVite,
     percentage: 86,
-    category: "Libraries & Frameworks",
+    category: "Frameworks",
   },
   {
     logoName: "GitHub",
@@ -220,7 +220,7 @@ export const ALL_SKILLS = [
 
 export const SKILL_TABS = [
   { tabName: "languages", tabIcon: AiOutlineCode },
-  { tabName: "Libraries & Frameworks", tabIcon: GoStack },
+  { tabName: "Frameworks", tabIcon: GoStack },
   { tabName: "Tools", tabIcon: AiOutlineTool },
 ];