Animated Tabs

1"use client";
2 
3import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
4import { motion } from "framer-motion";
5import { useState } from "react";
6 
7export function AnimatedTabs() {
8  const tabs = ["Account", "Password", "Settings"];
9  const [activeTab, setActiveTab] = useState(tabs[0]);
10 
11  return (
12    <div className="flex items-center justify-center p-12">
13      <Tabs
14        value={activeTab}
15        onValueChange={setActiveTab}
16        className="w-[400px]"
17      >
18        <TabsList className="relative grid w-full grid-cols-3">
19          {tabs.map((tab) => (
20            <TabsTrigger key={tab} value={tab} className="relative z-10">
21              {tab}
22            </TabsTrigger>
23          ))}
24          <motion.div
25            layoutId="activeTab"
26            className="absolute h-8 rounded-sm bg-[var(--card-bg)] shadow-sm"
27            initial={false}
28            animate={{
29              x: tabs.indexOf(activeTab) * 133.33,
30              width: 133.33,
31            }}
32            transition={{ type: "spring", stiffness: 300, damping: 30 }}
33          />
34        </TabsList>
35        {tabs.map((tab) => (
36          <TabsContent key={tab} value={tab} className="mt-4">
37            <motion.div
38              initial={{ opacity: 0, y: 10 }}
39              animate={{ opacity: 1, y: 0 }}
40              transition={{ duration: 0.3 }}
41              className="rounded-lg border  p-4"
42            >
43              <p className="text-sm">{tab} settings content goes here</p>
44            </motion.div>
45          </TabsContent>
46        ))}
47      </Tabs>
48    </div>
49  );
50}