"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"; import { cn } from "@/lib/utils"; const TABS = [ { id: "popular", label: "محبوب", icon: Fire02Icon, color: "text-red-500 dark:text-red-400", fill: "fill-red-500 dark:fill-red-400", bg: "bg-red-50 dark:bg-red-500/15", }, { id: "favorites", label: "علاقه‌مندی‌ها", icon: FavouriteIcon, color: "text-neutral-900 dark:text-neutral-50", fill: "fill-neutral-900 dark:fill-neutral-50", bg: "bg-neutral-100 dark:bg-white/12", }, ] as const; const spring = { type: "spring" as const, damping: 22, stiffness: 260, mass: 1, }; const pillShell = cn( "rounded-full", "bg-white dark:bg-[hsl(225_8%_16%)]", "shadow-[0_10px_28px_-12px_rgba(0,0,0,0.22)]", "dark:shadow-[0_12px_32px_-14px_rgba(0,0,0,0.55)]", "ring-1 ring-black/5 dark:ring-white/10", ); export default function DiscoverButton() { const [activeTab, setActiveTab] = useState<(typeof TABS)[number]["id"]>( TABS[0].id, ); const [isSearchExpanded, setIsSearchExpanded] = useState(false); return (

{/* Search — fixed height; expands only in width */} { if (!isSearchExpanded) setIsSearchExpanded(true); }} className={cn( "relative flex h-14 shrink-0 cursor-pointer items-center overflow-hidden px-4 sm:h-[60px] sm:px-[1.125rem]", pillShell, )} style={{ minWidth: 56, maxWidth: "100%" }} > {isSearchExpanded ? ( e.stopPropagation()} onKeyDown={(e) => { if (e.key === "Escape") setIsSearchExpanded(false); }} /> ) : null} {/* Tabs / close — always one horizontal pill */} {TABS.map((tab) => ( ))}

); }