"use client"; import { useState } from "react"; import { motion } from "motion/react"; import { Search01Icon, FavouriteIcon, Fire02Icon, MultiplicationSignIcon, } from "@hugeicons/core-free-icons"; import { HugeiconsIcon } from "@hugeicons/react"; // Change Here const TABS = [ { id: "popular", label: "محبوب", icon: Fire02Icon, color: "text-red-500", fill: "fill-red-500", bg: "bg-red-50", }, { id: "favorites", label: "علاقه‌مندی‌ها", icon: FavouriteIcon, color: "text-gray-900", fill: "fill-gray-900", bg: "bg-gray-100", }, ] as const; export default function DiscoverButton() { const [activeTab, setActiveTab] = useState<(typeof TABS)[number]["id"]>( TABS[0].id ); const [isSearchExpanded, setIsSearchExpanded] = useState(false); return (

{/* Search Button / Input */} !isSearchExpanded && setIsSearchExpanded(true)} className={`relative flex h-[60px] cursor-pointer items-center overflow-hidden rounded-[3rem] bg-white px-[1.125rem] py-2 shadow-lg ${ isSearchExpanded ? "flex-1" : "" }`} >

e.stopPropagation()} /> {/* Tab Container / Close Button */} {/* Wrapper to control clipping */} {/* Tabs Group - stays in place, gets clipped */}

{TABS.map((tab) => ( ))}

{/* Close Button - positioned absolutely on top */}

); }