Floating dock

"use client";
import styles from "./FloatingDock.module.css";
import { useState } from "react";
const defaults = [
  { id: "home", label: "Home", glyph: "⌂" },
  { id: "projects", label: "Projects", glyph: "▦" },
  { id: "activity", label: "Activity", glyph: "◷" },
  { id: "saved", label: "Saved", glyph: "♡" },
];
export default function FloatingDock({ items = defaults, onSelect }) {
  const [active, setActive] = useState(items[0]?.id);
  return (
    <div className={styles.root}>
      <div className={styles.dock} role="group" aria-label="Workspace view">
        {items.map((item) => (
          <button
            key={item.id}
            type="button"
            aria-label={item.label}
            aria-pressed={active === item.id}
            onClick={() => {
              setActive(item.id);
              onSelect?.(item.id);
            }}
          >
            <span className={styles.tip}>{item.label}</span>
            <span className={styles.glyph} aria-hidden="true">
              {item.glyph}
            </span>
            <i aria-hidden="true" />
          </button>
        ))}
      </div>
      <p role="status">{items.find((item) => item.id === active)?.label}</p>
    </div>
  );
}