1import React, { useState } from "react";
2
3type Tab = {
4  label: string;
5  content: React.ReactNode;
6};
7
8type Variant = "dark" | "light" | "gradient";
9
10interface TabsProps {
11  tabs: Tab[];
12  variant?: Variant;
13}
14
15const Tabs: React.FC<TabsProps> = ({ tabs, variant = "dark" }) => {
16  const [active, setActive] = useState(0);
17
18  const variantStyles = {
19    dark: {
20      container: "bg-gray-900 text-white border-gray-700",
21      tab: "text-gray-300 hover:text-white",
22      active: "text-white border-b-2 border-indigo-500",
23    },
24    light: {
25      container: "bg-white text-gray-800 border-gray-200",
26      tab: "text-gray-600 hover:text-black",
27      active: "text-black border-b-2 border-blue-500",
28    },
29    gradient: {
30      container: "bg-gradient-to-r from-indigo-600 via-purple-600 to-pink-500 text-white border-transparent",
31      tab: "text-white/80 hover:text-white",
32      active: "text-white border-b-2 border-white",
33    },
34  }[variant];
35
36  return (
37    <div className={`w-full max-w-3xl mx-auto rounded-2xl overflow-hidden shadow-lg border ${variantStyles.container}`}>
38      {/* Tab Header */}
39      <div className="flex justify-around border-b border-gray-700 relative">
40        {tabs.map((tab, index) => (
41          <button
42            key={index}
43            onClick={() => setActive(index)}
44            onKeyDown={(e) => {
45              if (e.key === "ArrowRight") setActive((active + 1) % tabs.length);
46              if (e.key === "ArrowLeft") setActive((active - 1 + tabs.length) % tabs.length);
47            }}
48            className={`relative flex-1 py-3 text-center font-medium transition-all duration-300 ${
49              active === index ? variantStyles.active : variantStyles.tab
50            }`}
51          >
52            {tab.label}
53            {active === index && (
54              <span className="absolute bottom-0 left-1/2 -translate-x-1/2 w-1/3 h-[2px] bg-current rounded-full animate-slideIn"></span>
55            )}
56          </button>
57        ))}
58      </div>
59
60      {/* Tab Content */}
61      <div className="p-6 animate-fadeIn min-h-[150px]">
62        {tabs[active].content}
63      </div>
64
65      <style jsx>{`
66        @keyframes slideIn {
67          from {
68            width: 0;
69            opacity: 0;
70          }
71          to {
72            width: 33%;
73            opacity: 1;
74          }
75        }
76        .animate-slideIn {
77          animation: slideIn 0.25s ease-out;
78        }
79        @keyframes fadeIn {
80          from {
81            opacity: 0;
82            transform: translateY(5px);
83          }
84          to {
85            opacity: 1;
86            transform: translateY(0);
87          }
88        }
89        .animate-fadeIn {
90          animation: fadeIn 0.3s ease-in-out;
91        }
92      `}</style>
93    </div>
94  );
95};
96
97return function AmazingTabs() {
98  const tabData: Tab[] = [
99    {
100      label: "Overview",
101      content: (
102        <p className="text-gray-300">
103          Welcome to the <strong>Overview</strong> tab! This section provides a summary of key features and quick access
104          to essential content.
105        </p>
106      ),
107    },
108    {
109      label: "Details",
110      content: (
111        <p className="text-gray-300">
112          The <strong>Details</strong> tab dives deeper into technical specs, product insights, and all the fine details
113          you might need.
114        </p>
115      ),
116    },
117    {
118      label: "Reviews",
119      content: (
120        <p className="text-gray-300">
121          The <strong>Reviews</strong> tab showcases what our users have to say. Honest feedback and testimonials help you
122          decide.
123        </p>
124      ),
125    },
126  ];
127
128  return (
129    <section className="min-h-screen flex flex-col items-center justify-center bg-gradient-to-b from-gray-900 to-black text-white px-4">
130      <h2 className="text-3xl md:text-4xl font-bold mb-10">Amazing Tabs Showcase</h2>
131
132      <div className="flex flex-wrap justify-center gap-10 w-full">
133        <Tabs tabs={tabData} variant="dark" />
134        <Tabs tabs={tabData} variant="light" />
135        <Tabs tabs={tabData} variant="gradient" />
136      </div>
137    </section>
138  );
139}