Social Float

1"use client"
2 
3import * as React from "react"
4import Link from "next/link"
5import { AnimatePresence, motion, useReducedMotion } from "motion/react"
6import { Github, Mail, X } from "lucide-react"
7 
8import { cn } from "@/lib/utils"
9 
10const CONTENT = {
11  links: [
12    { label: "Email", href: "mailto:hello@example.com", external: false },
13    { label: "GitHub", href: "https://github.com", external: true },
14    { label: "X / Twitter", href: "https://x.com", external: true },
15    { label: "Contact", href: "/contact", external: false },
16  ] as Array<{
17    label: string
18    href: string
19    external?: boolean
20    icon?: "mail" | "github" | "x" | null
21  }>,
22}
23 
24function XIcon({ className }: { className?: string }) {
25  return (
26    <svg
27      viewBox="0 0 24 24"
28      aria-hidden
29      className={className}
30      fill="currentColor"
31    >
32      <path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-4.714-6.231-5.401 6.231H2.744l7.727-8.835L1.254 2.25H8.08l4.259 5.672L18.244 2.25zm-1.161 17.52h1.833L7.084 4.126H5.117L17.083 19.77z" />
33    </svg>
34  )
35}
36 
37export function SocialFloat({
38  links = CONTENT.links,
39  className,
40}: {
41  links?: Array<{
42    label: string
43    href: string
44    external?: boolean
45    icon?: "mail" | "github" | "x" | null
46  }>
47  className?: string
48} = {}) {
49  const [open, setOpen] = React.useState(false)
50  const reduceMotion = useReducedMotion()
51  const rootRef = React.useRef<HTMLDivElement>(null)
52 
53  React.useEffect(() => {
54    if (!open) return
55    const onKey = (e: KeyboardEvent) => {
56      if (e.key === "Escape") setOpen(false)
57    }
58    const onPointer = (e: MouseEvent | TouchEvent) => {
59      if (
60        rootRef.current &&
61        e.target instanceof Node &&
62        !rootRef.current.contains(e.target)
63      ) {
64        setOpen(false)
65      }
66    }
67    window.addEventListener("keydown", onKey)
68    window.addEventListener("mousedown", onPointer)
69    return () => {
70      window.removeEventListener("keydown", onKey)
71      window.removeEventListener("mousedown", onPointer)
72    }
73  }, [open])
74 
75  return (
76    <div
77      ref={rootRef}
78      className={cn(
79        "pointer-events-none fixed right-4 bottom-5 z-40 sm:right-6 sm:bottom-7",
80        className
81      )}
82    >
83      <div className="pointer-events-auto flex flex-col items-end gap-2">
84        <AnimatePresence>
85          {open ? (
86            <motion.div
87              key="connect-panel"
88              role="dialog"
89              aria-label="Connect"
90// … truncated