diff --git a/app/components/ColorPalette.tsx b/app/components/ColorPalette.tsx index 03e5408..418121f 100644 --- a/app/components/ColorPalette.tsx +++ b/app/components/ColorPalette.tsx @@ -7,7 +7,7 @@ interface ColorPaletteProps { const ColorPalette: React.FC = ({ colors, size = 'small' }) => { const [copiedColor, setCopiedColor] = useState(null); - const [hoveredColor, setHoveredColor] = useState(null); + const [hoveredColorId, setHoveredColorId] = useState(null); const textAreaRef = useRef(null); const handleColorClick = (color: string) => { @@ -39,33 +39,36 @@ const ColorPalette: React.FC = ({ colors, size = 'small' }) = return ( <>
- {colors.map((color, index) => ( -
handleColorClick(color)} - onMouseEnter={() => setHoveredColor(color)} - onMouseLeave={() => setHoveredColor(null)} - > - {size === 'small' && hoveredColor === color && ( -
-
- {color} -
- )} - {size === 'large' && ( -
- {color} -
- )} - {copiedColor === color && ( -
- Copied! -
- )} -
- ))} + {colors.map((color, index) => { + const colorId = `color-${index}-${color}`; + return ( +
handleColorClick(color)} + onMouseEnter={() => setHoveredColorId(colorId)} + onMouseLeave={() => setHoveredColorId(null)} + > + {size === 'small' && hoveredColorId === colorId && ( +
+
+ {color} +
+ )} + {size === 'large' && ( +
+ {color} +
+ )} + {copiedColor === color && ( +
+ Copied! +
+ )} +
+ ); + })}