CoolFace
Apppublic

admin08077/Githubgemini

sourceHugging Faceotherupdated 10mo agoView on Hugging Face
0likes
ProjectMoodboard-Dzxwlg03.js.map1 linesDownload Raw Back to assets
1{"version":3,"file":"ProjectMoodboard-Dzxwlg03.js","sources":["../../components/features/ProjectMoodboard.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport { PhotoIcon } from '../icons.tsx';\nimport { useLocalStorage } from '../../hooks/useLocalStorage.ts';\n\ninterface MoodboardItem {\n    id: number;\n    text: string;\n    x: number;\n    y: number;\n    color: string;\n}\n\nconst colors = ['bg-yellow-200', 'bg-green-200', 'bg-blue-200', 'bg-pink-200', 'bg-purple-200', 'bg-orange-200'];\nconst textColors = ['text-yellow-800', 'text-green-800', 'text-blue-800', 'text-pink-800', 'text-purple-800', 'text-orange-800'];\n\nexport const ProjectMoodboard: React.FC = () => {\n    const [items, setItems] = useLocalStorage<MoodboardItem[]>('devcore_moodboard_items', []);\n    const [dragging, setDragging] = useState<{ id: number; offsetX: number; offsetY: number } | null>(null);\n\n    const addItem = () => {\n        const newItem: MoodboardItem = {\n            id: Date.now(),\n            text: 'New Idea',\n            x: 50,\n            y: 50,\n            color: colors[items.length % colors.length],\n        };\n        setItems([...items, newItem]);\n    };\n    \n    const deleteItem = (id: number, e: React.MouseEvent) => {\n        e.stopPropagation();\n        setItems(items.filter((n) => n.id !== id));\n    };\n\n    const updateItem = (id: number, updates: Partial<MoodboardItem>) => {\n        setItems(items.map((n) => n.id === id ? { ...n, ...updates } : n));\n    };\n\n    const onMouseDown = (e: React.MouseEvent<HTMLDivElement>, id: number) => {\n        if ((e.target as HTMLElement).tagName === 'TEXTAREA') return;\n        const noteElement = e.currentTarget;\n        const rect = noteElement.getBoundingClientRect();\n        setDragging({ id, offsetX: e.clientX - rect.left, offsetY: e.clientY - rect.top });\n    };\n\n    const onMouseMove = (e: React.MouseEvent<HTMLDivElement>) => {\n        if (!dragging) return;\n        const boardRect = e.currentTarget.getBoundingClientRect();\n        updateItem(dragging.id, {\n            x: e.clientX - dragging.offsetX - boardRect.left,\n            y: e.clientY - dragging.offsetY - boardRect.top\n        });\n    };\n\n    const onMouseUp = () => setDragging(null);\n\n    return (\n        <div className=\"h-full flex flex-col p-4 sm:p-6 lg:p-8 text-text-primary\">\n            <header className=\"mb-6 flex justify-between items-center\">\n                 <div>\n                    <h1 className=\"text-3xl font-bold flex items-center\"><PhotoIcon /><span className=\"ml-3\">Project Moodboard</span></h1>\n                    <p className=\"text-text-secondary mt-1\">A visual space to gather ideas, images, and notes.</p>\n                </div>\n                <button onClick={addItem} className=\"btn-primary px-6 py-2\">Add Item</button>\n            </header>\n            <div\n                className=\"relative flex-grow bg-background border-2 border-dashed border-border rounded-lg overflow-hidden\"\n                onMouseMove={onMouseMove} onMouseUp={onMouseUp} onMouseLeave={onMouseUp}\n            >\n                {items.map((item) => (\n                    <div\n                        key={item.id}\n                        className={`group absolute w-48 h-48 p-2 flex flex-col shadow-lg cursor-grab active:cursor-grabbing rounded-md transition-transform duration-100 border border-black/20 ${item.color} ${textColors[colors.indexOf(item.color)]}`}\n                        style={{ top: item.y, left: item.x, transform: dragging?.id === item.id ? 'scale(1.05)' : 'scale(1)' }}\n                        onMouseDown={e => onMouseDown(e, item.id)}\n                    >\n                        <button onClick={(e) => deleteItem(item.id, e)} className=\"absolute -top-2 -right-2 w-6 h-6 rounded-full bg-gray-700 text-white font-bold text-xs flex items-center justify-center opacity-0 group-hover:opacity-100 hover:bg-red-500 transition-all\">&times;</button>\n                        <textarea\n                            value={item.text}\n                            onChange={(e) => updateItem(item.id, { text: e.target.value })}\n                            className=\"w-full h-full bg-transparent resize-none focus:outline-none font-medium p-1\"\n                        />\n                    </div>\n                ))}\n            </div>\n        </div>\n    );\n};"],"names":["colors","textColors","ProjectMoodboard","items","setItems","useLocalStorage","dragging","setDragging","useState","addItem","newItem","deleteItem","id","e","n","updateItem","updates","onMouseDown","rect","onMouseMove","boardRect","onMouseUp","jsxs","jsx","PhotoIcon","item"],"mappings":"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"}