TabsNav

tabsnav-1779354208482.tsx

'use client';

import React, { useState } from 'react';

interface Tab {
  id: number;
  label: string;
}

const tabs: Tab[] = [
  { id: 1, label: 'Tab 1' },
  { id: 2, label: 'Tab 2' },
  { id: 3, label: 'Tab 3' },
  { id: 4, label: 'Tab 4' },
];

const TabsNav: React.FC = () => {
  const [activeTab, setActiveTab] = useState(tabs[0].id);

  const handleTabClick = (id: number) => {
    setActiveTab(id);
  };

  return (
    <div className="bg-zinc-950 p-4 rounded-lg">
      <div className="flex justify-center">
        {tabs.map((tab) => (
          <button
            key={tab.id}
            className={`py-2 px-4 mr-2 text-sm font-medium rounded-lg ${
              activeTab === tab.id
                ? 'bg-transparent text-gold-500 border-gold-500 border-b-4'
                : 'text-zinc-400 border-b-0 hover:text-gold-500 hover:border-b-2 hover:border-gold-500'
            } transition duration-300 ease-in-out`}
            onClick={() => handleTabClick(tab.id)}
          >
            {tab.label}
          </button>
        ))}
      </div>
      <div
        className="h-1 bg-gold-500 rounded-full mt-2 transition-transform duration-300 ease-in-out"
        style={{
          width: `${100 / tabs.length}%`,
          transform: `translateX(${(activeTab - 1) * (100 / tabs.length)}%)`,
        }}
      />
    </div>
  );
};

export default TabsNav;

Component info

CategoryNavigation

Frameworkreact

TierFREE

Copies0

About

Animated tabs navigation component

More from Navigation

import * as React from 'react';
import * as ReactDOM from 'react-dom';

interface FloatingDockProps {
  icons: { id: number; src: string; }[];
}

class FloatingDock extends React.Component<FloatingDockProps, {}> {
  constructor(props: FloatingDockPro

FloatingDock

Navigation

'use client';

import React from 'react';

interface PaginationNavProps {
  currentPage: number;
  totalPages: number;
  onPageChange: (page: number) => void;
}

const PaginationNav: React.FC<PaginationNavProps> = ({ currentPage, totalPages, onPageCh

PaginationNav

Navigation

'use client';

import React from 'react';

interface Step {
  title: string;
  completed: boolean;
  active: boolean;
}

const steps: Step[] = [
  { title: 'Step 1', completed: true, active: false },
  { title: 'Step 2', completed: true, active: fals

StepperNav

Navigation

// @types/react
// @types/react-dom
import React, { useState } from 'react';
import './MegaMenu.css';

interface MegaMenuProps {
  title: string;
  items: {
    column: string;
    link: string;
    text: string;
  }[];
}

const MegaMenu: React.FC<Me

MegaMenu

Navigation