diff --git a/src/constants/code/Animations/metallicPaintCode.js b/src/constants/code/Animations/metallicPaintCode.js index 041c4a36..136178b8 100644 --- a/src/constants/code/Animations/metallicPaintCode.js +++ b/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,7 +17,7 @@ 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(null); useEffect(() => { async function loadDefaultImage() { @@ -25,28 +25,30 @@ const Component = () => { 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 (
); }`, - code, - css, - tailwind, - tsCode, - tsTailwind -} \ No newline at end of file +code, +css, +tailwind, +tsCode, +tsTailwind +}; \ No newline at end of file