"use client";

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

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

const buttons = [
  "Dashboard",
  "Analytics",
  "Documents",
  "Notifications",
  "Profile",
];

export const FlashlightTabs = () => {
  const [activeButton, setActiveButton] = useState(buttons[2]);

  const coveredPercentage = useMemo(() => {
    const indexOfActiveButton = buttons.indexOf(activeButton);
    return (indexOfActiveButton / (buttons.length - 1)) * 100;
  }, [activeButton]);

  return (
    <div className="p-6 border border-[hsl(0_0%_15.8%)] rounded-lg items-center justify-center flex bg-[hsl(0_0%_11.0%)] overflow-hidden">
      <div
        className={cn(
          "w-fit flex h-[48px] rounded-full relative border border-[hsl(0_0%_20.5%)] shadow-[0_5px_10px_rgba(0,0,0,0.12)]",
          "after:absolute after:pointer-events-none after:left-0 after:w-full after:h-full after:will-change-[background-position-x] after:[transition:background-position-x_500ms_ease] after:z-1 after:-bottom-px after:[background-image:linear-gradient(to_left,#343434_20%,#343434_44%,#a0a0a0_50%,#7e7e7e_55%,#343434_63%,#343434_100%)] after:rounded-full after:[background-size:200%] after:[background-position-x:var(--after-background-position-x)]"
        )}
        style={
          {
            "--after-background-position-x": `${100 - coveredPercentage - 2}%`,
          } as React.CSSProperties
        }
      >
        <div
          aria-hidden
          className="[background:linear-gradient(90deg,rgba(0,0,0,0),hsl(0_0%_20.5%)_20%,hsl(0_0%_49.4%)_67.19%,rgba(0,0,0,0))] absolute top-[-1px] w-full mx-auto z-1 opacity-60 h-px"
        />
        <div
          className={cn(
            "flex p-[5px] relative z-2 overflow-hidden bg-[hsl(0_0%_11.0%)] rounded-full"
          )}
        >
          {buttons.map((button, index) => {
            return (
              <button
                key={button}
                className={cn(
                  "text-[15px] relative flex items-center justify-center text-[#a0a0a0] px-3 cursor-pointer [transition:color_150ms,text-shadow_250ms] hover:text-[#ededed]",
                  activeButton === button
                    ? "[text-shadow:1px_1px_2px_rgba(255,255,255,0.57)] text-[#ededed]"
                    : ""
                )}
                onClick={() => setActiveButton(button)}
              >
                {button}

                {activeButton === button && (
                  <>
                    <motion.div
                      layoutId="bg-indicator"
                      className="absolute left-0 top-0 w-full h-full px-3 z-6 [transition:backdrop-filter_500ms] bg-[hsl(0_0%_100%/0.056)] rounded-xl"
                      animate={{
                        borderTopLeftRadius:
                          index === buttons.length - 1 ? "120px" : "500px",
                        borderBottomLeftRadius:
                          index === buttons.length - 1 ? "120px" : "500px",
                        borderTopRightRadius: index === 0 ? "120px" : "500px",
                        borderBottomRightRadius:
                          index === 0 ? "120px" : "500px",
                      }}
                      transition={{
                        duration: 0.3,
                      }}
                    />
                    <motion.div
                      layoutId="flashlight"
                      className="bg-white absolute z-1 blur-[7px] w-1/2 h-[50px] rounded-full -bottom-[52px]"
                      style={{
                        scale: 2,
                        transformOrigin: "50% 50% 0px",
                        opacity: 0.2,
                      }}
                    />
                  </>
                )}
              </button>
            );
          })}
        </div>
      </div>
    </div>
  );
};
Flashlight Tabs

Installation

Installation
