Menu Bar

coming soon

"use client";

import type { LucideIcon } from "lucide-react";
import { ArrowUp } from "lucide-react";
import { ArrowRight } from "lucide-react";
import { ArrowDown } from "lucide-react";
import { ArrowLeft } from "lucide-react";
import { useState } from "react";
import { LayoutGroup, motion } from "framer-motion";

export const metadata = {
  title: "Menu Bar",
  description: "Menu Bar with some layout animation.",
  install: "coming soon"
};

export type MenuOption = {
  id: string;
  label: string;
  icon: LucideIcon;
}

export const MENU_OPTIONS: MenuOption[] = [
  {
    id: "1",
    label: "Up",
    icon: ArrowUp,
  },
  {
    id: "2",
    label: "Right",
    icon: ArrowRight,
  },
  {
    id: "3",
    label: "Down",
    icon: ArrowDown,
  },
  {
    id: "4",
    label: "Left",
    icon: ArrowLeft,
  }
];

function Menu({options}: {options: MenuOption[]}) {
  const [selectedId, setSelectedId] = useState(options[0]?.id);

  const circleTransition = {
    type: "spring" as const,
    stiffness: 500,
    damping: 35,
    mass: 1.0
  };
  return (
    <LayoutGroup>
    <div className="inline-flex items-center h-6 md:h-10 lg:h-11 rounded-full bg-white">
      {options.map(option => {
        const isActive = option.id === selectedId;
        return (
          <button
            key={option.id}
            onClick={() => setSelectedId(option.id)}
            className="relative h-6 w-6 md:h-10 md:w-10 lg:h-11 lg:w-11 flex items-center justify-center cursor-pointer"
          >
            {isActive && (
              <motion.div layoutId="active-menu-option"
              className="absolute z-0 left-1/2 top-1/2 h-5 w-5 md:h-8 md:w-8 lg:h-9 lg:w-9 -translate-x-1/2 -translate-y-1/2 rounded-full bg-design-card pointer-events-none"
              transition={circleTransition}/>
            )}
            <option.icon className="z-10 w-2.5 h-2.5 md:w-4 md:h-4 lg:w-4.5 lg:h-4.5 text-foreground" />
          </button>
        );
      })}
    </div>
    </LayoutGroup>
  )
}

export default function MenuBar() {
  return <Menu options={MENU_OPTIONS} />;
}