"use client";

import { useState } from "react";
import { motion } from "motion/react";

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

export const SlidingButterTabs = () => {
  const [activeTab, setActiveTab] = useState(TABS[0].name);

  return (
    <div className="p-6 rounded-lg flex items-center justify-center bg-white h-fit">
      <div className="relative max-w-fit w-full rounded-full p-1.5 bg-[#f3f5f4] shadow-[inset_0px_1.5px_1.5px_rgba(0,0,0,0.1)] outline-[0.5px] outline-[rgba(0,0,0,0.1)] flex items-center justify-center">
        <div className="relative flex flex-col items-center w-fit">
          <ul className="relative flex w-full items-center justify-between gap-2">
            {TABS.map((tab) => {
              return (
                <li key={tab.name} className="relative">
                  <button
                    onClick={() => {
                      setActiveTab(tab.name);
                    }}
                    data-tab={tab.name}
                    className={cn(
                      "flex h-[34px] items-center gap-2 rounded-full text-sm px-4 cursor-pointer relative z-1 [&>span]:[transition:color_0.5s_ease] [&>svg]:[transition:color_0.5s_ease]",
                      activeTab === tab.name
                        ? "[&>span]:text-black [&>svg]:text-black"
                        : "[&>span]:text-[#7b8a83] [&>svg]:text-[#7b8a83]"
                    )}
                  >
                    {tab.icon}
                    <span className="text-sm font-medium ">{tab.name}</span>
                  </button>
                  {activeTab === tab.name && (
                    <motion.div
                      layoutId="active-tab"
                      className="absolute inset-0 z-0 w-full overflow-hidden rounded-full bg-gradient-to-b from-white via-[#f9fbfa] to-[#f6f8f7] shadow-sm"
                    ></motion.div>
                  )}
                </li>
              );
            })}
          </ul>
        </div>
      </div>
    </div>
  );
};

export const TABS = [
  {
    name: "Collections",
    icon: (
      <svg
        xmlns="http://www.w3.org/2000/svg"
        className="size-4.5"
        viewBox="0 0 16 16"
      >
        <path
          fill="currentColor"
          d="M1.086 5.183A2.5 2.5 0 0 1 2.854 2.12l3.863-1.035A2.5 2.5 0 0 1 9.78 2.854L10.354 5H9.32l-.506-1.888a1.5 1.5 0 0 0-1.837-1.06L3.112 3.087a1.5 1.5 0 0 0-1.06 1.837l1.035 3.864a1.5 1.5 0 0 0 1.837 1.06L5 9.828v1.028a2.5 2.5 0 0 1-2.879-1.81zM8 6a2 2 0 0 0-2 2v5a2 2 0 0 0 2 2h5a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2zM7 8a1 1 0 0 1 1-1h5a1 1 0 0 1 1 1v5a1 1 0 0 1-1 1H8a1 1 0 0 1-1-1z"
        />
      </svg>
    ),
  },
  {
    name: "Trending",
    icon: (
      <svg
        xmlns="http://www.w3.org/2000/svg"
        className="size-4.5"
        viewBox="0 0 24 24"
      >
        <path
          fill="currentColor"
          d="M2.7 17.625q-.3-.3-.288-.712t.288-.688l5.275-5.35Q8.55 10.3 9.4 10.3t1.425.575l2.575 2.6l5.2-5.15H17q-.425 0-.712-.288T16 7.326t.288-.712t.712-.288h4q.425 0 .713.288t.287.712v4q0 .425-.288.713t-.712.287t-.712-.287t-.288-.713v-1.6L14.825 14.9q-.575.575-1.425.575t-1.425-.575L9.4 12.325l-5.3 5.3q-.275.275-.7.275t-.7-.275"
        />
      </svg>
    ),
  },
  {
    name: "Favorites",
    icon: (
      <svg
        xmlns="http://www.w3.org/2000/svg"
        className="size-4.5"
        viewBox="0 0 24 24"
      >
        <path
          fill="currentColor"
          d="m7.625 6.4l2.8-3.625q.3-.4.713-.587T12 2t.863.188t.712.587l2.8 3.625l4.25 1.425q.65.2 1.025.738t.375 1.187q0 .3-.088.6t-.287.575l-2.75 3.9l.1 4.1q.025.875-.575 1.475t-1.4.6q-.05 0-.55-.075L12 19.675l-4.475 1.25q-.125.05-.275.063T6.975 21q-.8 0-1.4-.6T5 18.925l.1-4.125l-2.725-3.875q-.2-.275-.288-.575T2 9.75q0-.625.363-1.162t1.012-.763zM8.85 8.125L4 9.725L7.1 14.2L7 18.975l5-1.375l5 1.4l-.1-4.8L20 9.775l-4.85-1.65L12 4zM12 11.5"
        />
      </svg>
    ),
  },
  {
    name: "Points",
    icon: (
      <svg
        xmlns="http://www.w3.org/2000/svg"
        className="size-4.5"
        viewBox="0 0 256 256"
      >
        <g fill="currentColor">
          <path
            d="m212 132l-58.63 58.63a32 32 0 0 1-45.25 0l-42.75-42.75a32 32 0 0 1 0-45.25L124 44Z"
            opacity=".2"
          />
          <path d="M237.66 66.34a8 8 0 0 0-11.32 0L192 100.69L155.31 64l34.35-34.34a8 8 0 1 0-11.32-11.32L144 52.69l-26.34-26.35a8 8 0 0 0-11.32 11.32l6.35 6.34l-53 53a40 40 0 0 0 0 56.57l15.71 15.71l-49.06 49.06a8 8 0 0 0 11.32 11.32l49.09-49.09l15.71 15.71a40 40 0 0 0 56.57 0l53-53l6.34 6.35a8 8 0 0 0 11.32-11.32L203.31 112l34.35-34.34a8 8 0 0 0 0-11.32M147.72 185a24 24 0 0 1-33.95 0L71 142.23a24 24 0 0 1 0-33.95l53-53L200.69 132Z" />
        </g>
      </svg>
    ),
  },
  {
    name: "Airdrops",
    icon: (
      <svg
        xmlns="http://www.w3.org/2000/svg"
        className="size-4.5"
        viewBox="0 0 512 512"
      >
        <path
          d="M32 272l128 48 16 160 80-112 112 112L480 32 32 272zm318.7 145.4L256 320l128-176-192 153.8-82.6-31 322-172.5-80.7 323.1z"
          fill="currentColor"
        />
      </svg>
    ),
  },
];
Sliding Butter Tabs

Installation

Installation
