fix: MetallicPaint import texts, and useState management

src/constants/code/Animations/metallicPaintCode.js

@@ -8,7 +8,7 @@ import tsTailwind from '@ts-tailwind/Animations/MetallicPaint/MetallicPaint.tsx?
 
 export const metallicPaint = {
   ...(generateCliCommands('Animations/MetallicPaint')),
-  usage: `import MetallicPaint, { parseLogoImage } from "./MetallicPaint";'
+  usage: `import MetallicPaint, { parseLogoImage } from "./MetallicPaint";
 import { useState, useEffect } from 'react';
 
 // replace with your own SVG
@@ -17,36 +17,38 @@ import { useState, useEffect } from 'react';
 import logo from '../../assets/logos/react-bits-solid-black.svg';
 
 const Component = () => {
-  const [imageData, setImageData] = useState(null);
+  const [imageData, setImageData] = useState<ImageData | null>(null);
 
   useEffect(() => {
     async function loadDefaultImage() {
       try {
         const response = await fetch(logo);
         const blob = await response.blob();
         const file = new File([blob], "default.png", { type: blob.type });
-        const { imageData } = await parseLogoImage(file);
-        setImageData(imageData);
+
+        const parsedData = await parseLogoImage(file);
+        setImageData(parsedData?.imageData ?? null);
+
       } catch (err) {
         console.error("Error loading default image:", err);
       }
     }
-      
+
     loadDefaultImage();
   }, []);
 
   return (
     <div style={{ width: '100%', height: '100vh' }}>
       <MetallicPaint 
-        imageData={imageData} 
+        imageData={imageData ?? new ImageData(1, 1)} 
         params={{ edge: 2, patternBlur: 0.005, patternScale: 2, refraction: 0.015, speed: 0.3, liquid: 0.07 }} 
       />
     </div>
   );
 }`,
-  code,
-  css,
-  tailwind,
-  tsCode,
-  tsTailwind
-}
+code,
+css,
+tailwind,
+tsCode,
+tsTailwind
+};