"use client";

import * as React from "react";
import { motion } from "framer-motion";

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

export interface FloatingToolbarItem {
  id: string;
  label: string;
  icon?: React.ReactNode;
  onSelect?: () => void;
}

export interface FloatingToolbarProps
  extends React.HTMLAttributes<HTMLDivElement> {
  items: FloatingToolbarItem[];
  activeId?: string;
  defaultActiveId?: string;
  onActiveChange?: (id: string) => void;
}

export function FloatingToolbar({
  items,
  activeId,
  defaultActiveId,
  onActiveChange,
  className,
  ...props
}: FloatingToolbarProps) {
  const [internalActive, setInternalActive] = React.useState(
    defaultActiveId ?? items[0]?.id
  );

  React.useEffect(() => {
    if (!activeId && !internalActive && items[0]?.id) {
      setInternalActive(items[0].id);
    }
  }, [activeId, internalActive, items]);

  const currentActive = activeId ?? internalActive;

  const handleSelect = (item: FloatingToolbarItem) => {
    if (!activeId) {
      setInternalActive(item.id);
    }
    onActiveChange?.(item.id);
    item.onSelect?.();
  };

  if (!items.length) {
    return null;
  }

  return (
    <div
      className={cn(
        "flex w-fit items-center gap-2 rounded-full border border-border bg-card/80 p-2 shadow-lg backdrop-blur-sm",
        className
      )}
      {...props}
    >
      {items.map((item) => (
        <motion.button
          key={item.id}
          type="button"
          onClick={() => handleSelect(item)}
          className={cn(
            "relative inline-flex items-center gap-2 rounded-full px-4 py-2 text-sm font-medium text-muted-foreground transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/40",
            currentActive === item.id && "text-foreground"
          )}
          whileHover={{ scale: 1.04 }}
          whileTap={{ scale: 0.98 }}
        >
          {currentActive === item.id ? (
            <motion.span
              layoutId="floating-toolbar-indicator"
              className="absolute inset-0 rounded-full border border-border bg-background shadow-sm"
              transition={{ type: "spring", stiffness: 480, damping: 36 }}
            />
          ) : null}
          <span className="relative z-10 inline-flex items-center gap-2">
            {item.icon ? (
              <span className="flex h-4 w-4 items-center justify-center">
                {item.icon}
              </span>
            ) : null}
            <span>{item.label}</span>
          </span>
        </motion.button>
      ))}
    </div>
  );
}
Floating Toolbar

Dependencies

Files

Installation
