Avatar Quick Actions

1"use client";
2 
3import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
4import { cn } from "@/lib/utils";
5import { AnimatePresence, motion } from "motion/react";
6import { type ReactNode, useState } from "react";
7 
8/* ═══════════════════════════════════════════════════════════
9   Orbital Bloom — actions live behind the avatar. Hover and
10   they spring outward radially with staggered timing, settling
11   into orbit positions. Focus any action and the rest dim,
12   drawing the eye. The avatar contracts to signal the release.
13   No tooltip, no portal — same spatial plane.
14   ═══════════════════════════════════════════════════════════ */
15 
16interface AvatarQuickActionsItem {
17  icon: ReactNode;
18  label: string;
19  onClick?: () => void;
20}
21 
22interface AvatarQuickActionsProps {
23  items: AvatarQuickActionsItem[];
24  avatarSrc?: string;
25  avatarFallback?: string;
26  size?: number;
27  className?: string;
28}
29 
30export default function AvatarQuickActions({
31  items,
32  avatarSrc,
33  avatarFallback,
34  size = 44,
35  className,
36}: AvatarQuickActionsProps) {
37  const [open, setOpen] = useState(false);
38  const [activeIdx, setActiveIdx] = useState<number | null>(null);
39 
40  const actionSize = Math.round(size * 0.7);
41  const orbit = Math.round(size * 0.95);
42  const container = orbit * 2 + actionSize;
43 
44  const step = (2 * Math.PI) / items.length;
45  const start = -Math.PI / 2;
46 
47  return (
48    <div
49      className={cn("relative", className)}
50      style={{ width: container, height: container }}
51      onMouseLeave={() => {
52        setOpen(false);
53        setActiveIdx(null);
54      }}
55    >
56      {/* orbit ring */}
57      <motion.div
58        className="pointer-events-none absolute left-1/2 top-1/2 rounded-full border border-border/30"
59        style={{
60          width: orbit * 2,
61          height: orbit * 2,
62          x: "-50%",
63          y: "-50%",
64        }}
65        animate={{
66          opacity: open ? 1 : 0,
67          scale: open ? 1 : 0.5,
68        }}
69        transition={{ type: "spring", stiffness: 300, damping: 25 }}
70      />
71 
72      {/* avatar */}
73      <motion.div
74        className="absolute left-1/2 top-1/2 z-20 cursor-pointer"
75        style={{ width: size, height: size, x: "-50%", y: "-50%" }}
76        animate={{ scale: open ? 0.92 : 1 }}
77// … truncated