where is the implementation of save button

[Jyotishmoy12]

You mean download button?

[SparshGarg999]

yes

[omar414]

no update?

[Jyotishmoy12]

update this code on the customiser.jsx file hope this helps---> import React, { useState, useEffect } from 'react'; import { AnimatePresence, motion } from 'framer-motion'; import { useSnapshot } from 'valtio';

import config from '../config/config'; import state from '../store'; import { download } from '../assets'; import { downloadCanvasToImage, reader } from '../config/helpers'; import { EditorTabs, FilterTabs, DecalTypes } from '../config/constants'; import { fadeAnimation, slideAnimation } from '../config/motion'; import { AIPicker, ColorPicker, CustomButton, FilePicker, Tab } from '../components';

const Customizer = () => { const snap = useSnapshot(state);

const [file, setFile] = useState('');

const [prompt, setPrompt] = useState(''); const [generatingImg, setGeneratingImg] = useState(false);

const [activeEditorTab, setActiveEditorTab] = useState(""); const [activeFilterTab, setActiveFilterTab] = useState({ logoShirt: true, stylishShirt: false, })

// show tab content depending on the activeTab const generateTabContent = () => { switch (activeEditorTab) { case "colorpicker": return case "filepicker": return <FilePicker file={file} setFile={setFile} readFile={readFile} /> case "aipicker": return <AIPicker prompt={prompt} setPrompt={setPrompt} generatingImg={generatingImg} handleSubmit={handleSubmit} /> default: return null; } }

const handleSubmit = async (type) => { if(!prompt) return alert("Please enter a prompt");

try {
  setGeneratingImg(true);

  const response = await fetch('https://project-threejs-ai-dalle-backend.onrender.com/api/v1/dalle', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({
      prompt,
    })
  })

  const data = await response.json();

  handleDecals(type, `data:image/png;base64,${data.photo}`)
} catch (error) {
  alert(error)
} finally {
  setGeneratingImg(false);
  setActiveEditorTab("");
}

}

const handleDecals = (type, result) => { const decalType = DecalTypes[type];

state[decalType.stateProperty] = result;

if(!activeFilterTab[decalType.filterTab]) {
  handleActiveFilterTab(decalType.filterTab)
}

}

const handleActiveFilterTab = (tabName) => { switch (tabName) { case "logoShirt": state.isLogoTexture = !activeFilterTab[tabName]; break; case "stylishShirt": state.isFullTexture = !activeFilterTab[tabName]; break; default: state.isLogoTexture = true; state.isFullTexture = false; break; }

// after setting the state, activeFilterTab is updated

setActiveFilterTab((prevState) => {
  return {
    ...prevState,
    [tabName]: !prevState[tabName]
  }
})

}

const readFile = (type) => { reader(file) .then((result) => { handleDecals(type, result); setActiveEditorTab(""); }) }

return (

{!snap.intro && ( <>

{EditorTabs.map((tab) => ( setActiveEditorTab(tab.name)} /> ))} {generateTabContent()}

state.intro = true} customStyles="w-fit px-4 py-2.5 font-bold text-sm" /> {FilterTabs.map((tab) => ( handleActiveFilterTab(tab.name)} /> ))} )}

) }

export default Customizer

[omar414]

worked fine thanks 👍