Pixel Icon

1'use client';
2 
3import type React from 'react';
4import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
5 
6interface PixelIconProps {
7  icon: number[][];
8  baseColor: string;
9  flickerColor: string;
10  secondaryColor?: string;
11  size?: number;
12  flickerChance?: number;
13  pixelShape?: 'circle' | 'square';
14  className?: string;
15}
16 
17const PixelIcon: React.FC<PixelIconProps> = ({
18  icon,
19  baseColor,
20  flickerColor,
21  secondaryColor = 'gray',
22  size = 80,
23  flickerChance = 0.3,
24  pixelShape = 'circle',
25  className,
26}) => {
27  const canvasRef = useRef<HTMLCanvasElement>(null);
28  const [isHovering, setIsHovering] = useState(false);
29  const [isInView, setIsInView] = useState(false);
30 
31  const memoizedColors = useMemo(() => {
32    const toRGB = (color: string): [number, number, number] => {
33      if (typeof window === 'undefined') {
34        return [0, 0, 0];
35      }
36      const canvas = document.createElement('canvas');
37      canvas.width = canvas.height = 1;
38      const ctx = canvas.getContext('2d');
39      if (!ctx) return [255, 0, 0];
40      ctx.fillStyle = color;
41      ctx.fillRect(0, 0, 1, 1);
42      const [r, g, b] = ctx.getImageData(0, 0, 1, 1).data;
43      return [r, g, b];
44    };
45 
46    const createShades = (
47      color: [number, number, number],
48      isDarker: boolean
49    ) => {
50      const shades: any = [];
51      if (isDarker) {
52        // Create more distinct dark shades
53        const darkFactors = [0.7, 0.8, 0.9, 1.0];
54        for (const factor of darkFactors) {
55          shades.push(
56            color.map((c) => Math.floor(c * factor)) as [number, number, number]
57          );
58        }
59      } else {
60        // Keep the original logic for lighter shades
61        for (let i = 0; i < 4; i++) {
62          const factor = 0.7 + (0.6 * i) / 3; // Range from 0.7 to 1.3
63          shades.push(
64            color.map((c) => Math.min(255, Math.floor(c * factor))) as [
65              number,
66              number,
67              number,
68            ]
69          );
70        }
71      }
72      return shades;
73    };
74 
75    const baseRGB = toRGB(baseColor);
76    const flickerRGB = toRGB(flickerColor);
77    const secondaryRGB = toRGB(secondaryColor);
78 
79    return {
80      base: `rgb(${baseRGB.join(',')})`,
81      flickerDark: createShades(flickerRGB, true),
82      flickerLight: createShades(flickerRGB, false),
83      secondary: `rgb(${secondaryRGB.join(',')})`,
84    };
85  }, [baseColor, flickerColor, secondaryColor]);
86 
87  const setupCanvas = useCallback(
88// … truncated