function Navigation() { const [isMenuOpen, setIsMenuOpen] = useState(false); return /*#__PURE__*/ React.createElement("nav", { className: "fixed top-0 w-full bg-[#0F4BC4] px-6 py-4 flex justify-between items-center shadow-md z-50", __source: { fileName: "", lineNumber: 5, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 6, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "https://ucarecdn.com/d16bc8be-27c7-4028-8c5e-d6b6c987ba5d/-/format/auto/", alt: "Tracky Bot logo", className: "w-[200px] h-[45px] object-contain", __source: { fileName: "", lineNumber: 7, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("button", { className: "md:hidden text-white", onClick: ()=>setIsMenuOpen(!isMenuOpen), __source: { fileName: "", lineNumber: 14, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `fas ${isMenuOpen ? "fa-times" : "fa-bars"}`, __source: { fileName: "", lineNumber: 18, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: `${isMenuOpen ? "flex" : "hidden"} md:flex absolute md:relative top-full left-0 md:top-auto w-full md:w-auto bg-[#0F4BC4] md:bg-transparent flex-col md:flex-row items-center space-y-4 md:space-y-0 md:space-x-8 pb-4 md:pb-0`, __source: { fileName: "", lineNumber: 21, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "#features", className: "text-white hover:text-[#a8b9eb] transition-colors duration-200", __source: { fileName: "", lineNumber: 24, columnNumber: 9 }, __self: this }, "Features"), /*#__PURE__*/ React.createElement("a", { href: "#pricing", className: "text-white hover:text-[#a8b9eb] transition-colors duration-200", __source: { fileName: "", lineNumber: 30, columnNumber: 9 }, __self: this }, "Pricing"), /*#__PURE__*/ React.createElement("a", { href: "#contact", className: "text-white hover:text-[#a8b9eb] transition-colors duration-200", __source: { fileName: "", lineNumber: 36, columnNumber: 9 }, __self: this }, "Contact"))); } function Navigation1() { const [uploadedImage, setUploadedImage] = useState(null); const [error, setError] = useState(null); const [upload, { loading }] = useUpload(); const handleImageUpload = async (e)=>{ const file = e.target.files[0]; if (file) { const { url, error } = await upload({ file }); if (error) { setError(error); return; } setUploadedImage(url); } }; const handleDownload = ()=>{ if (!uploadedImage) return; const link = document.createElement("a"); link.href = uploadedImage; link.download = "profile-picture.png"; document.body.appendChild(link); link.click(); document.body.removeChild(link); }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gray-50", __source: { fileName: "", lineNumber: 75, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(Navigation, { __source: { fileName: "", lineNumber: 76, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("main", { className: "pt-[56px]", __source: { fileName: "", lineNumber: 77, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("section", { className: "py-16 px-6 bg-white", __source: { fileName: "", lineNumber: 78, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-4xl mx-auto text-center", __source: { fileName: "", lineNumber: 79, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-bold mb-8 text-[#0F4BC4]", __source: { fileName: "", lineNumber: 80, columnNumber: 13 }, __self: this }, "Create jouw profiel afbeelding"), /*#__PURE__*/ React.createElement("div", { className: "bg-gray-50 rounded-lg shadow-lg p-8", __source: { fileName: "", lineNumber: 83, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-md mx-auto", __source: { fileName: "", lineNumber: 84, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "file", accept: "image/*", onChange: handleImageUpload, className: "w-full mb-4", __source: { fileName: "", lineNumber: 85, columnNumber: 17 }, __self: this }), error && /*#__PURE__*/ React.createElement("div", { className: "text-red-500 mb-4", __source: { fileName: "", lineNumber: 91, columnNumber: 27 }, __self: this }, error), loading && /*#__PURE__*/ React.createElement("div", { className: "text-gray-600 mb-4", __source: { fileName: "", lineNumber: 93, columnNumber: 19 }, __self: this }, "Uploading..."), uploadedImage && /*#__PURE__*/ React.createElement("div", { className: "mt-6 flex flex-col items-center", __source: { fileName: "", lineNumber: 96, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: uploadedImage, alt: "Geüploade profielfoto", className: "w-32 h-32 rounded-full mx-auto object-cover", __source: { fileName: "", lineNumber: 97, columnNumber: 21 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: handleDownload, className: "mt-4 px-6 py-2 bg-[#0F4BC4] text-white rounded-lg hover:bg-[#1957d0] transition-colors duration-200 font-medium", __source: { fileName: "", lineNumber: 102, columnNumber: 21 }, __self: this }, "Download Profielfoto")))))))); } function Navigation1Story() { return /*#__PURE__*/ React.createElement(Navigation1, { __source: { fileName: "", lineNumber: 120, columnNumber: 10 }, __self: this }); } function MainComponent() { const [selectedTraits, setSelectedTraits] = useState({}); const [traits, setTraits] = useState({}); const [isAdmin, setIsAdmin] = useState(false); const [adminPassword, setAdminPassword] = useState(""); const [showAdminModal, setShowAdminModal] = useState(false); const [upload, { loading }] = useUpload(); const [previewImage, setPreviewImage] = useState(null); const [error, setError] = useState(null); const [openCategory, setOpenCategory] = useState(null); const [categoryOrder, setCategoryOrder] = useState([]); const [isMenuOpen, setIsMenuOpen] = useState(false); const [isSaving, setIsSaving] = useState(false); const [isGenerating, setIsGenerating] = useState(false); const [dbConfig] = useState(()=>{ return { endpoint: "/api/db/tracky", adminPassword: "Hallo11!" }; }); const loadTraits = async ()=>{ console.log("Starting loadTraits..."); try { const response = await fetch(dbConfig.endpoint, { method: "POST", body: JSON.stringify({ query: "SELECT * FROM `traits` ORDER BY position ASC" }) }); if (!response.ok) { throw new Error(`HTTP error! status: ${response.status}`); } const data = await response.json(); if (data.length > 0) { const groupedTraits = {}; const order = []; data.forEach((trait)=>{ if (!groupedTraits[trait.category]) { groupedTraits[trait.category] = []; order.push(trait.category); } groupedTraits[trait.category].push(trait.image_url); }); setTraits(groupedTraits); setCategoryOrder(order); } } catch (err) { console.error("Error in loadTraits:", err); setError("Error loading traits: " + err.message); } }; const saveLayerOrder = async (newOrder)=>{ setIsSaving(true); try { for(let i = 0; i < newOrder.length; i++){ await fetch(dbConfig.endpoint, { method: "POST", body: JSON.stringify({ query: "UPDATE `traits` SET `position` = ? WHERE `category` = ?", values: [ i, newOrder[i] ] }) }); } setCategoryOrder(newOrder); } catch (err) { console.error("Error saving layer order:", err); setError("Error saving order"); } setIsSaving(false); }; const handleTraitUpload = async (category, file)=>{ try { const { url, error: uploadError } = await upload({ file }); if (uploadError) { setError(uploadError); return; } const response = await fetch(dbConfig.endpoint, { method: "POST", body: JSON.stringify({ query: "INSERT INTO `traits` (category, image_url, position) VALUES (?, ?, ?)", values: [ category, url, categoryOrder.indexOf(category) ] }) }); if (!response.ok) { throw new Error(`HTTP error! status: ${response.status}`); } setTraits((prev)=>({ ...prev, [category]: [ ...prev[category] || [], url ] })); await loadTraits(); } catch (err) { console.error("Error saving trait:", err); setError("Error saving trait: " + err.message); } }; const handleTraitDelete = async (category, imageUrl)=>{ try { const response = await fetch(dbConfig.endpoint, { method: "POST", body: JSON.stringify({ query: "DELETE FROM `traits` WHERE `category` = ? AND `image_url` = ?", values: [ category, imageUrl ] }) }); if (!response.ok) { throw new Error(`HTTP error! status: ${response.status}`); } setTraits((prev)=>({ ...prev, [category]: prev[category].filter((url)=>url !== imageUrl) })); if (selectedTraits[category] === imageUrl) { setSelectedTraits((prev)=>{ const newSelected = { ...prev }; delete newSelected[category]; return newSelected; }); } await loadTraits(); } catch (err) { console.error("Error deleting trait:", err); setError("Error deleting trait: " + err.message); } }; const updatePreview = async ()=>{ console.log("Starting updatePreview with traits:", selectedTraits); if (!Object.keys(selectedTraits).length) { console.log("No traits selected, clearing preview"); setPreviewImage(null); return; } setIsGenerating(true); setError(null); try { const canvas = document.createElement("canvas"); canvas.width = 500; canvas.height = 500; const ctx = canvas.getContext("2d"); // Eerst alle afbeeldingen laden const loadedImages = await Promise.all(categoryOrder.filter((category)=>selectedTraits[category]).map((category)=>{ console.log(`Loading image for ${category}:`, selectedTraits[category]); return new Promise((resolve, reject)=>{ const img = new window.Image(); // Gebruik window.Image img.crossOrigin = "anonymous"; img.onload = ()=>resolve({ category, img }); img.onerror = (e)=>reject(new Error(`Failed to load image for ${category}: ${e.message}`)); img.src = selectedTraits[category]; }); })); console.log("All images loaded:", loadedImages.length); // Canvas leegmaken ctx.clearRect(0, 0, canvas.width, canvas.height); // Afbeeldingen in volgorde tekenen loadedImages.forEach(({ img })=>{ ctx.drawImage(img, 0, 0, canvas.width, canvas.height); }); const dataUrl = canvas.toDataURL("image/png"); setPreviewImage(dataUrl); setError(null); } catch (err) { console.error("Error in updatePreview:", err); setError(`Error generating preview: ${err.message}`); setPreviewImage(null); } finally{ setIsGenerating(false); } }; const handleTraitClick = (category, trait)=>{ setSelectedTraits((prev)=>({ ...prev, [category]: trait })); }; const handleAdminLogin = ()=>{ if (adminPassword === dbConfig.adminPassword) { setIsAdmin(true); setShowAdminModal(false); setAdminPassword(""); setError(null); } else { setError("Incorrect password"); } }; useEffect(()=>{ if (Object.keys(selectedTraits).length > 0) { updatePreview(); } else { setPreviewImage(null); } }, [ selectedTraits ]); useEffect(()=>{ loadTraits(); }, []); return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gradient-to-b from-gray-50 to-gray-100 flex flex-col", __source: { fileName: "", lineNumber: 231, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("nav", { className: "w-full bg-[#0F4BC4] px-6 py-4 flex justify-between items-center shadow-md relative", __source: { fileName: "", lineNumber: 232, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 233, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "https://ucarecdn.com/d16bc8be-27c7-4028-8c5e-d6b6c987ba5d/-/format/auto/", alt: "Tracky Bot logo", className: "w-[200px] h-[45px] object-contain", __source: { fileName: "", lineNumber: 234, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setIsMenuOpen(!isMenuOpen), className: "md:hidden text-white", __source: { fileName: "", lineNumber: 240, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `fas ${isMenuOpen ? "fa-times" : "fa-bars"} text-2xl`, __source: { fileName: "", lineNumber: 244, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: `${isMenuOpen ? "flex" : "hidden"} md:flex fixed md:static top-[72px] left-0 w-full md:w-auto bg-[#0F4BC4] md:bg-transparent flex-col md:flex-row items-center space-y-4 md:space-y-0 md:space-x-8 py-4 md:py-0 shadow-lg md:shadow-none z-50`, __source: { fileName: "", lineNumber: 248, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "https://www.trackybot.com", className: "text-white hover:text-gray-200", __source: { fileName: "", lineNumber: 253, columnNumber: 11 }, __self: this }, "Tracky Bot"), /*#__PURE__*/ React.createElement("a", { href: "https://www.trackynft.com", className: "text-white hover:text-gray-200", __source: { fileName: "", lineNumber: 259, columnNumber: 11 }, __self: this }, "Tracky NFT"), /*#__PURE__*/ React.createElement("a", { href: "https://x.com/TrackyBot", className: "text-white hover:text-gray-200", __source: { fileName: "", lineNumber: 265, columnNumber: 11 }, __self: this }, "X Account"))), /*#__PURE__*/ React.createElement("div", { className: "p-4 md:p-8 flex-grow", __source: { fileName: "", lineNumber: 274, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-7xl mx-auto", __source: { fileName: "", lineNumber: 275, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-center gap-6 mb-6", __source: { fileName: "", lineNumber: 276, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "https://ucarecdn.com/936972c7-e4d0-4fc8-9fe8-95bd8ce4086b/-/format/auto/", alt: "Blue robot mascot", className: "w-20 h-20 rounded-2xl shadow-lg", __source: { fileName: "", lineNumber: 277, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("h1", { className: "text-5xl font-bold text-center font-roboto bg-gradient-to-r from-blue-600 to-blue-400 bg-clip-text text-transparent", __source: { fileName: "", lineNumber: 282, columnNumber: 13 }, __self: this }, "Tracky PFP Generator")), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-8", __source: { fileName: "", lineNumber: 286, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-xl p-8 shadow-xl border border-gray-100", __source: { fileName: "", lineNumber: 287, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-3xl font-semibold mb-8 font-roboto text-gray-800", __source: { fileName: "", lineNumber: 288, columnNumber: 15 }, __self: this }, "Choose your parts"), categoryOrder.map((category)=>/*#__PURE__*/ React.createElement("div", { key: category, className: "mb-4", __source: { fileName: "", lineNumber: 293, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>setOpenCategory(openCategory === category ? null : category), className: "w-full flex items-center justify-between p-4 bg-gray-50 rounded-xl hover:bg-gray-100 transition-colors duration-200", __source: { fileName: "", lineNumber: 294, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center gap-4", __source: { fileName: "", lineNumber: 302, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-xl capitalize font-roboto text-gray-700", __source: { fileName: "", lineNumber: 303, columnNumber: 23 }, __self: this }, category), selectedTraits[category] && /*#__PURE__*/ React.createElement("img", { src: selectedTraits[category], alt: `Selected ${category}`, className: "w-8 h-8 rounded-lg object-cover", __source: { fileName: "", lineNumber: 307, columnNumber: 25 }, __self: this })), /*#__PURE__*/ React.createElement("i", { className: `fas fa-chevron-${openCategory === category ? "up" : "down"} text-gray-400`, __source: { fileName: "", lineNumber: 314, columnNumber: 21 }, __self: this })), openCategory === category && /*#__PURE__*/ React.createElement("div", { className: "mt-4 grid grid-cols-3 md:grid-cols-4 gap-4 p-4 bg-gray-50 rounded-xl", __source: { fileName: "", lineNumber: 320, columnNumber: 21 }, __self: this }, traits[category]?.map((trait, index)=>/*#__PURE__*/ React.createElement("img", { key: index, src: trait, alt: `${category} option ${index + 1}`, className: `w-20 h-20 object-cover cursor-pointer rounded-xl transition-all duration-200 hover:scale-105 ${selectedTraits[category] === trait ? "ring-4 ring-blue-500 shadow-lg" : "hover:ring-2 hover:ring-blue-300"}`, onClick: ()=>handleTraitClick(category, trait), __source: { fileName: "", lineNumber: 322, columnNumber: 25 }, __self: this })))))), /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-xl p-8 shadow-xl border border-gray-100", __source: { fileName: "", lineNumber: 340, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-3xl font-semibold mb-8 font-roboto text-gray-800", __source: { fileName: "", lineNumber: 341, columnNumber: 15 }, __self: this }, "Preview"), isGenerating ? /*#__PURE__*/ React.createElement("div", { className: "relative w-full pb-[100%]", __source: { fileName: "", lineNumber: 345, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "absolute inset-0 bg-gray-50 rounded-xl flex items-center justify-center border-4 border-dashed border-gray-200", __source: { fileName: "", lineNumber: 346, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-gray-400 text-lg text-center px-4", __source: { fileName: "", lineNumber: 347, columnNumber: 21 }, __self: this }, "Preview wordt gegenereerd..."))) : previewImage ? /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center", __source: { fileName: "", lineNumber: 353, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "relative w-full pb-[100%]", __source: { fileName: "", lineNumber: 354, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: previewImage, alt: "Generated PFP", className: "absolute inset-0 w-full h-full rounded-xl shadow-lg border-4 border-white object-contain", __source: { fileName: "", lineNumber: 355, columnNumber: 21 }, __self: this })), /*#__PURE__*/ React.createElement("a", { href: previewImage, download: "my-pfp.png", className: "mt-6 bg-gradient-to-r from-blue-600 to-blue-400 text-white px-8 py-3 rounded-xl hover:shadow-lg transition-all duration-200 font-semibold", __source: { fileName: "", lineNumber: 361, columnNumber: 19 }, __self: this }, "Download PFP")) : /*#__PURE__*/ React.createElement("div", { className: "relative w-full pb-[100%]", __source: { fileName: "", lineNumber: 370, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "absolute inset-0 bg-gray-50 rounded-xl flex items-center justify-center border-4 border-dashed border-gray-200", __source: { fileName: "", lineNumber: 371, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-gray-400 text-lg text-center px-4", __source: { fileName: "", lineNumber: 372, columnNumber: 21 }, __self: this }, "Kies onderdelen om je PFP te maken"))), error && /*#__PURE__*/ React.createElement("p", { className: "mt-4 text-red-500 text-center", __source: { fileName: "", lineNumber: 379, columnNumber: 17 }, __self: this }, error))), !isAdmin && /*#__PURE__*/ React.createElement("div", { className: "flex justify-end mt-8", __source: { fileName: "", lineNumber: 385, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>setShowAdminModal(true), className: "px-6 py-3 bg-gray-100 text-gray-700 rounded-xl hover:bg-gray-200 transition-all duration-200 font-medium", __source: { fileName: "", lineNumber: 386, columnNumber: 15 }, __self: this }, "Admin Login")), showAdminModal && /*#__PURE__*/ React.createElement("div", { className: "fixed inset-0 bg-black bg-opacity-50 backdrop-blur-sm flex items-center justify-center", __source: { fileName: "", lineNumber: 396, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white p-8 rounded-xl w-[400px] shadow-2xl border border-gray-100", __source: { fileName: "", lineNumber: 397, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-semibold mb-6 text-gray-800", __source: { fileName: "", lineNumber: 398, columnNumber: 17 }, __self: this }, "Admin Login"), /*#__PURE__*/ React.createElement("input", { type: "password", placeholder: "Password", value: adminPassword, onChange: (e)=>setAdminPassword(e.target.value), className: "w-full p-3 border border-gray-200 rounded-xl mb-6 focus:ring-2 focus:ring-blue-500 focus:border-transparent outline-none", onKeyPress: (e)=>{ if (e.key === "Enter") { handleAdminLogin(); } }, __source: { fileName: "", lineNumber: 401, columnNumber: 17 }, __self: this }), error && /*#__PURE__*/ React.createElement("p", { className: "text-red-500 text-sm mb-6", __source: { fileName: "", lineNumber: 413, columnNumber: 27 }, __self: this }, error), /*#__PURE__*/ React.createElement("div", { className: "flex justify-end gap-4", __source: { fileName: "", lineNumber: 414, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>setShowAdminModal(false), className: "px-6 py-3 text-gray-600 hover:text-gray-800 font-medium", __source: { fileName: "", lineNumber: 415, columnNumber: 19 }, __self: this }, "Cancel"), /*#__PURE__*/ React.createElement("button", { onClick: handleAdminLogin, className: "px-6 py-3 bg-gradient-to-r from-blue-600 to-blue-400 text-white rounded-xl hover:shadow-lg transition-all duration-200 font-medium", __source: { fileName: "", lineNumber: 421, columnNumber: 19 }, __self: this }, "Login")))), isAdmin && /*#__PURE__*/ React.createElement("div", { className: "mt-8 bg-white rounded-xl p-6 shadow-xl border border-gray-100", __source: { fileName: "", lineNumber: 433, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center mb-6", __source: { fileName: "", lineNumber: 434, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-semibold font-roboto", __source: { fileName: "", lineNumber: 435, columnNumber: 17 }, __self: this }, "Admin Panel"), /*#__PURE__*/ React.createElement("div", { className: "flex gap-2", __source: { fileName: "", lineNumber: 438, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", placeholder: "New category", className: "p-2 border rounded", onKeyPress: (e)=>{ if (e.key === "Enter" && e.target.value) { const newCategory = e.target.value.toLowerCase(); setTraits((prev)=>({ ...prev, [newCategory]: [] })); setCategoryOrder((prev)=>[ ...prev, newCategory ]); e.target.value = ""; } }, __source: { fileName: "", lineNumber: 439, columnNumber: 19 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 gap-6", __source: { fileName: "", lineNumber: 458, columnNumber: 15 }, __self: this }, categoryOrder.map((category, index)=>/*#__PURE__*/ React.createElement("div", { key: category, className: "p-6 border border-gray-100 rounded-xl bg-gray-50", __source: { fileName: "", lineNumber: 460, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center mb-4", __source: { fileName: "", lineNumber: 464, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center gap-2", __source: { fileName: "", lineNumber: 465, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-xl capitalize font-roboto", __source: { fileName: "", lineNumber: 466, columnNumber: 25 }, __self: this }, category), /*#__PURE__*/ React.createElement("div", { className: "flex gap-2", __source: { fileName: "", lineNumber: 469, columnNumber: 25 }, __self: this }, /*#__PURE__*/ React.createElement("button", { disabled: index === 0, onClick: async ()=>{ const newOrder = [ ...categoryOrder ]; [newOrder[index], newOrder[index - 1]] = [ newOrder[index - 1], newOrder[index] ]; await saveLayerOrder(newOrder); }, className: "px-2 py-1 text-gray-500 hover:text-gray-700 disabled:opacity-50", __source: { fileName: "", lineNumber: 470, columnNumber: 27 }, __self: this }, "↑"), /*#__PURE__*/ React.createElement("button", { disabled: index === categoryOrder.length - 1, onClick: async ()=>{ const newOrder = [ ...categoryOrder ]; [newOrder[index], newOrder[index + 1]] = [ newOrder[index + 1], newOrder[index] ]; await saveLayerOrder(newOrder); }, className: "px-2 py-1 text-gray-500 hover:text-gray-700 disabled:opacity-50", __source: { fileName: "", lineNumber: 484, columnNumber: 27 }, __self: this }, "↓")), isSaving && /*#__PURE__*/ React.createElement("span", { className: "text-sm text-blue-500 ml-2", __source: { fileName: "", lineNumber: 500, columnNumber: 27 }, __self: this }, "Saving...")), /*#__PURE__*/ React.createElement("button", { onClick: ()=>{ const newTraits = { ...traits }; delete newTraits[category]; setTraits(newTraits); setCategoryOrder((prev)=>prev.filter((cat)=>cat !== category)); setSelectedTraits((prev)=>{ const newSelected = { ...prev }; delete newSelected[category]; return newSelected; }); }, className: "text-red-500 hover:text-red-700", __source: { fileName: "", lineNumber: 505, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-trash", __source: { fileName: "", lineNumber: 521, columnNumber: 25 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col gap-4", __source: { fileName: "", lineNumber: 525, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 526, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("h4", { className: "text-sm mb-1 font-roboto", __source: { fileName: "", lineNumber: 527, columnNumber: 25 }, __self: this }, "Upload files"), /*#__PURE__*/ React.createElement("input", { type: "file", accept: "image/png", multiple: true, onChange: async (e)=>{ if (e.target.files) { const files = Array.from(e.target.files); for (const file of files){ await handleTraitUpload(category, file); } } }, className: "w-full", __source: { fileName: "", lineNumber: 530, columnNumber: 25 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-4 gap-4 mt-4", __source: { fileName: "", lineNumber: 546, columnNumber: 23 }, __self: this }, traits[category]?.map((trait, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "relative group", __source: { fileName: "", lineNumber: 548, columnNumber: 27 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: trait, alt: `${category} trait ${index + 1}`, className: "w-20 h-20 object-cover rounded-xl", __source: { fileName: "", lineNumber: 549, columnNumber: 29 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: ()=>handleTraitDelete(category, trait), className: "absolute top-1 right-1 bg-red-500 text-white p-1 rounded-full opacity-0 group-hover:opacity-100 transition-opacity duration-200", __source: { fileName: "", lineNumber: 554, columnNumber: 29 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-times", __source: { fileName: "", lineNumber: 558, columnNumber: 31 }, __self: this })))))))))))), /*#__PURE__*/ React.createElement("footer", { className: "w-full bg-[#333] py-8", __source: { fileName: "", lineNumber: 572, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center", __source: { fileName: "", lineNumber: 573, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "https://ucarecdn.com/d16bc8be-27c7-4028-8c5e-d6b6c987ba5d/-/format/auto/", alt: "Tracky Bot logo", className: "w-[200px] h-[45px] object-contain mb-4", __source: { fileName: "", lineNumber: 574, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("p", { className: "text-white text-center", __source: { fileName: "", lineNumber: 579, columnNumber: 11 }, __self: this }, "Copyright © 2025 Trackypfp.com")))); }