Facescape

1'use client';
2import React, { useState, useEffect, useRef } from 'react';
3import { Avatar, AvatarImage, AvatarFallback } from '@/components/ui/avatar';
4import {
5  Tooltip,
6  TooltipContent,
7  TooltipTrigger,
8  TooltipProvider,
9} from '@/components/ui/tooltip';
10import { cn } from '@/lib/utils';
11 
12export interface AvatarData {
13  src: string;
14  alt: string;
15  fallback: string;
16  name: string;
17}
18 
19export interface FacescapeProps {
20  avatars: AvatarData[];
21  className?: string;
22  colorDuration?: number;
23  variant?: 'circle' | 'square' | 'squircle';
24}
25 
26const BREAKPOINTS = { sm: 640, md: 768, lg: 1024, xl: 1280, '2xl': 1536 };
27 
28const useBreakpoint = (breakpoint: 'sm' | 'md' | 'lg' | 'xl' | '2xl') => {
29  const [isBelow, setIsBelow] = useState(false);
30  useEffect(() => {
31    const handleResize = () =>
32      setIsBelow(window.innerWidth < BREAKPOINTS[breakpoint]);
33    handleResize();
34    window.addEventListener('resize', handleResize);
35    return () => window.removeEventListener('resize', handleResize);
36  }, [breakpoint]);
37  return isBelow;
38};
39 
40const FacescapeItem = React.forwardRef<
41  HTMLDivElement,
42  {
43    className?: string;
44    src: string;
45    alt: string;
46    fallback: string;
47    name: string;
48    colorDuration?: number;
49    autoAnimate?: boolean;
50    variant?: 'circle' | 'square' | 'squircle';
51  }
52>(
53  (
54    {
55      className,
56      src,
57      alt,
58      fallback,
59      name,
60      colorDuration = 3000,
61      autoAnimate = false,
62      variant = 'squircle',
63      ...props
64    },
65    ref,
66  ) => {
67    const [isHovered, setIsHovered] = useState(false);
68    const [isColorful, setIsColorful] = useState(false);
69    const [isLarge, setIsLarge] = useState(false);
70    const [isVisible, setIsVisible] = useState(false);
71    const itemRef = useRef<HTMLDivElement>(null);
72 
73    useEffect(() => {
74      if (ref) {
75        if (typeof ref === 'function') {
76          ref(itemRef.current);
77        } else {
78          ref.current = itemRef.current;
79        }
80      }
81    }, [ref]);
82 
83    useEffect(() => {
84      if (!autoAnimate || !itemRef.current) return;
85      const observer = new IntersectionObserver(
86        ([entry]) => setIsVisible(entry.isIntersecting),
87        { threshold: 0.3 },
88      );
89      observer.observe(itemRef.current);
90      return () => observer.disconnect();
91    }, [autoAnimate]);
92 
93    const active = autoAnimate ? isVisible : isHovered;
94 
95    useEffect(() => {
96      let colorTimeout: NodeJS.Timeout | undefined;
97      let sizeTimeout: NodeJS.Timeout | undefined;
98// … truncated