"use client"; import type { ReactNode } from "react"; import { motion, useReducedMotion } from "motion/react"; export type IconTile = { label: string; /** Icon rendered inside the tile. Pass any SVG or image. */ icon?: ReactNode; /** Legacy text mark, used only when no icon is provided. */ mark?: string; /** Tailwind classes for the inner plate. */ tone?: string; }; function Glyph({ d }: { d: string }) { return ( ); } const defaultTiles: IconTile[] = [ { label: "Mute microphone", icon: , tone: "bg-zinc-100 text-zinc-900" }, { label: "Turn off camera", icon: , tone: "bg-zinc-100 text-zinc-900" }, { label: "Share screen", icon: , tone: "bg-zinc-100 text-zinc-900" }, { label: "Leave call", icon: , tone: "bg-rose-500 text-white" }, ]; type SkeuoIconTileRowProps = { tiles?: IconTile[]; onTileClick?: (tile: IconTile) => void; label?: string; /** Forces reduced motion in addition to the OS preference. */ reducedMotion?: boolean; className?: string; }; export function SkeuoIconTileRow({ tiles = defaultTiles, onTileClick, label = "Call controls", reducedMotion = false, className = "", }: SkeuoIconTileRowProps) { const shouldReduceMotion = Boolean(useReducedMotion()) || reducedMotion; return (

{tiles.map((tile) => ( onTileClick?.(tile)} whileHover={shouldReduceMotion ? undefined : { y: -3 }} whileTap={shouldReduceMotion ? undefined : { y: 2, scale: 0.97 }} transition={{ duration: 0.14, ease: "easeOut" }} className="relative grid size-20 place-items-center rounded-2xl border border-white/10 bg-zinc-900 shadow-[inset_0_1px_0_rgba(255,255,255,.18),0_6px_0_#27272a,0_18px_28px_rgba(0,0,0,.45)] focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-white" > ))}

); }