"use client";

import { useState } from "react";
import { motion, AnimatePresence } from "motion/react";
import { BookIcon, GiftIcon, HeartIcon } from "lucide-react";

import {
  Tabs,
  TabsContent,
  TabsList,
  TabsTrigger,
} from "@/components/ui/tabs/base";

import { cn } from "@/lib/utils";

const tabs = [
  {
    name: "Breaking",
    value: "explore",
    icon: BookIcon,
    content: (
      <>
        The beat drops low and the floor becomes a stage. Sneakers slide across
        the cardboard while the crowd forms a circle under flickering
        streetlights. Hands hit the ground, legs spin through the air, and every
        move follows the rhythm of the breakbeat. The DJ scratches vinyl in the
        background while the bassline pushes the energy higher. Spin, freeze,
        step back, and flow again—style, balance, and attitude blending together
        in a dance born from the streets. In every turn and every freeze, the
        music speaks through motion, telling a story without a single word.
      </>
    ),
  },
  {
    name: "Djing",
    value: "djing",
    icon: HeartIcon,
    content: (
      <>
        Back in the days when the boombox cracked on the corner, rhythms rolled
        through the city like midnight trains. The beat knocked heavy, sneakers
        scraped the pavement, and every rhyme carried a story from the block to
        the rooftop.
        <span className="text-fuchsia-700">
          Vinyl spinning slow, bassline breathing deep, voices rising over the
          drums with that raw flavor only the streets could teach.
        </span>{" "}
        No glitter, no filter—just truth in the rhythm, echoes in the alley, and
        the sound of a generation turning poetry into power.
      </>
    ),
  },
  {
    name: "Graffiti",
    value: "graffiti",
    icon: GiftIcon,
    content: (
      <>
        <span className="text-foreground font-semibold">Surprise!</span>{" "}
        Here&apos;s something unexpected—a fun fact, a quirky tip, or a daily
        challenge. Come back for a new surprise every day!
      </>
    ),
  },
];

const ExpandableTabsPattern = () => {
  const [activeTab, setActiveTab] = useState("explore");

  return (
    <div className="w-full max-w-md p-12">
      <Tabs value={activeTab} onValueChange={setActiveTab} className="">
        <TabsList size="lg" className="h-auto gap-2 rounded-full p-1 ">
          {tabs.map(({ icon: Icon, name, value }) => {
            const isActive = activeTab === value;
            return (
              <motion.div
                key={value}
                layout
                className={cn(
                  "flex h-8 items-center justify-center overflow-hidden rounded-full",
                  isActive ? "flex-1" : "flex-none px-8",
                )}
                onClick={() => setActiveTab(value)}
                initial={false}
                animate={{
                  width: isActive ? 120 : 32,
                }}
                transition={{
                  type: "tween",
                  stiffness: 400,
                  damping: 25,
                }}
              >
                <TabsTrigger
                  value={value}
                  render={
                    <motion.button
                      className="flex h-8 w-full items-center justify-center"
                      animate={{ filter: "blur(0px)" }}
                      exit={{ filter: "blur(2px)" }}
                      transition={{ duration: 0.25, ease: "easeOut" }}
                    >
                      <Icon className="aspect-square size-4 shrink-0" />
                      <AnimatePresence initial={false}>
                        {isActive && (
                          <motion.span
                            className="font-medium max-sm:hidden"
                            initial={{ opacity: 0, scaleX: 0.8 }}
                            animate={{ opacity: 1, scaleX: 1 }}
                            transition={{ duration: 0.25, ease: "easeOut" }}
                            style={{ originX: 0 }}
                          >
                            {name}
                          </motion.span>
                        )}
                      </AnimatePresence>
                    </motion.button>
                  }
                ></TabsTrigger>
              </motion.div>
            );
          })}
        </TabsList>

        {tabs.map((tab) => (
          <TabsContent key={tab.value} value={tab.value}>
            <p className="text-muted-foreground text-sm">{tab.content}</p>
          </TabsContent>
        ))}
      </Tabs>
    </div>
  );
};

export default ExpandableTabsPattern;
Tabs Pattern

Animated Expand

Animated Underline

Badge

Button

Default

Disabled

Icon Text

Icon

Line

Pill

Size Lg

Size Md

Size Sm

Size Xs

Vertical

We use cookies
