Merge pull request #4 from num-js/component-tabs

Added new component - 'Tabs' component with documentation

Author: num-js

configs/componentsDocumentation.json

@@ -138,6 +138,20 @@
       "type": "image-hover",
       "new": true
     },
+    {
+      "name": "Tabs",
+      "componentArray": [
+        {
+          "componentName": "tabs",
+          "filesrc": "components/tabs/tabs.tsx",
+          "iframeSrc": "live-components/tabs",
+          "parentlink": "tabs",
+          "parentName": "Tabs"
+        }
+      ],
+      "type": "tabs",
+      "new": true
+    },
     {
       "name": "Footers",
       "componentArray": [

configs/leftSideComponentMetaData.ts

@@ -21,7 +21,12 @@ export const basicComponents = [
   {
     href: '/components/image-hover',
     name: 'Image Hover',
-    component: 'image-hover',
+    component: 'image-hover'
+  },
+  {
+    href: '/components/tabs',
+    name: 'Tabs',
+    component: 'tabs',
     new: true,
   },
   {

content/components/tabs.mdx

@@ -0,0 +1,43 @@
+export const metadata = {
+  title: "Tabs - Animated Sliding Pill Tabs Component",
+  description: "A modern, accessible React tabs component with smooth sliding pill indicator. Features animated transitions, dark mode support, and mobile-responsive design. Perfect for dashboard navigation, settings panels, and content organization with elegant hover effects and seamless tab switching.",
+  keywords: [
+    "Tabs React",
+    "Animated Tabs React",
+    "Moving indicator tabs",
+    "Vercel style tabs",
+    "Sliding pill indicator",
+    "Active tab background",
+    "Tabs with animation",
+    "React animated navigation",
+    "tab highlight",
+    "Smooth tab transition",
+    "UI tabs component",
+    "Hover/active tab animation",
+    "Accessible tabs React",
+    "Interactive tab switcher",
+    "Modern tabs UI",
+    "Dark mode tabs",
+    "Tailwind CSS tabs",
+    "Pill navigation",
+    "Settings navigation tabs",
+    "Content switcher component",
+  ],
+  authors: [{ name: "Numan", url: "https://numan-dev.web.app" }],
+  creator: "@numan-dev",
+  publisher: "Struct-UI",
+  robots: {
+    index: true,
+    follow: true,
+    googleBot: {
+      index: true,
+      follow: true,
+      "max-video-preview": -1,
+      "max-image-preview": "large",
+      "max-snippet": -1
+    }
+  },
+  category: "technology"
+};
+
+<ComponentCodePreview name='tabs' hasReTrigger isFitheight />

registry/components/tabs/tabs.tsx

@@ -0,0 +1,54 @@
+'use client';
+import { useState } from 'react';
+
+interface ITabs {
+  label: string;
+  id: string;
+}
+
+export default function Tabs() {
+  const [selectedTab, setSelectedTab] = useState<string>('tab1');
+
+  const tabsConfig: ITabs[] = [
+    { label: 'Tab 1', id: 'tab1' },
+    { label: 'Tab 2', id: 'tab2' },
+    { label: 'Tab 3', id: 'tab3' },
+  ];
+
+  const selectedIndex = tabsConfig.findIndex(section => section.id === selectedTab);
+  const sliderWidth = 100 / tabsConfig.length;
+
+  const handleTabChange = (sectionId: string) => {
+    setSelectedTab(sectionId);
+  };
+
+  return (
+    <section className="w-full max-w-screen-sm mx-auto p-2">
+      <div className="relative flex bg-gray-200 dark:bg-gray-900 rounded-full p-1 shadow-inner dark:shadow-gray-950">
+        <div className="relative flex bg-gray-100 dark:bg-gray-800 rounded-full p-1 shadow-inner dark:shadow-gray-900 min-w-[200px] w-full">
+          <div
+            className="absolute top-1 h-[calc(100%-8px)] bg-white dark:bg-gray-700 rounded-full shadow-md dark:shadow-black/30 transition-all duration-300 ease-in-out z-10"
+            style={{
+              width: `calc(${sliderWidth}% - 8px)`,
+              left: `calc(${selectedIndex * sliderWidth}% + 4px)`,
+            }}
+          />
+          {tabsConfig.map((tab) => (
+            <button
+              key={tab.id}
+              className={`relative z-20 flex-1 bg-transparent border-none font-medium rounded-full transition-all duration-300 py-2 px-4 ${
+                selectedTab === tab.id
+                  ? 'text-black dark:text-white font-semibold'
+                  : 'text-gray-700 dark:text-gray-400 hover:bg-gray-300 dark:hover:bg-gray-700'
+              }`}
+              onClick={() => handleTabChange(tab.id)}
+              disabled={selectedTab === tab.id}
+            >
+              {tab.label}
+            </button>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}