Discover Button

1"use client";
2 
3import { useState } from "react";
4import { motion } from "motion/react";
5 
6import {
7  Search01Icon,
8  FavouriteIcon,
9  Fire02Icon,
10  MultiplicationSignIcon,
11} from "@hugeicons/core-free-icons";
12import { HugeiconsIcon } from "@hugeicons/react";
13 
14// Change Here
15const TABS = [
16  {
17    id: "popular",
18    label: "Popular",
19    icon: Fire02Icon,
20    color: "text-red-500",
21    fill: "fill-red-500",
22    bg: "bg-red-50",
23  },
24  {
25    id: "favorites",
26    label: "Favorites",
27    icon: FavouriteIcon,
28    color: "text-gray-900",
29    fill: "fill-gray-900",
30    bg: "bg-gray-100",
31  },
32] as const;
33 
34export default function DiscoverButton() {
35  const [activeTab, setActiveTab] = useState<(typeof TABS)[number]["id"]>(
36    TABS[0].id
37  );
38  const [isSearchExpanded, setIsSearchExpanded] = useState(false);
39 
40  return (
41    <div className="flex items-center gap-3 p-2 h-full ">
42      {/* Search Button / Input */}
43      <motion.div
44        layout
45        transition={{
46          type: "spring",
47          damping: 20,
48          stiffness: 230,
49          mass: 1.2,
50        }}
51        onClick={() => !isSearchExpanded && setIsSearchExpanded(true)}
52        className={`flex items-center bg-white rounded-[3rem] shadow-lg cursor-pointer h-[60px] overflow-hidden relative px-[1.125rem]     ${
53          isSearchExpanded ? "flex-1" : ""
54        }`}
55      >
56        <div className="shrink-0">
57          <HugeiconsIcon
58            icon={Search01Icon}
59            className="w-6 h-6 text-gray-800"
60          />
61        </div>
62 
63        <motion.div
64          initial={false}
65          animate={{
66            width: isSearchExpanded ? "auto" : "0px",
67            opacity: isSearchExpanded ? 1 : 0,
68            filter: isSearchExpanded ? "blur(0px)" : "blur(4px)",
69            marginLeft: isSearchExpanded ? "12px" : "0px",
70          }}
71          transition={{
72            type: "spring",
73            damping: 20,
74            stiffness: 230,
75            mass: 1.2,
76          }}
77          className="overflow-hidden -mb-0.5 flex items-center"
78        >
79          <input
80            type="text"
81            placeholder="Search"
82            className="border-0 outline-none bg-transparent text-lg focus-visible:ring-0 focus-visible:ring-offset-0 w-full"
83            onClick={(e) => e.stopPropagation()}
84          />
85        </motion.div>
86      </motion.div>
87 
88      {/* Tab Container / Close Button */}
89      <motion.div
90        layout
91        transition={{
92          type: "spring",
93          damping: 20,
94// … truncated