Loading wired elements...

;\n }\n \n const addComponent = (type) => {\n const id = Date.now().toString();\n let newComponent = {\n id,\n type,\n props: {},\n style: { \n '--wired-color': selectedColor, \n '--wired-corner-radius': `${cornerRadius}px` \n },\n };\n \n switch(type) {\n case 'button':\n newComponent.props.children = 'Button';\n break;\n case 'input':\n newComponent.props.placeholder = 'Type here...';\n break;\n case 'textarea':\n newComponent.props.placeholder = 'Write something longer...';\n break;\n case 'checkbox':\n newComponent.props.children = 'Checkbox';\n break;\n case 'card':\n newComponent.props.elevation = \"2\";\n newComponent.props.children = 'Card content';\n break;\n case 'progress':\n newComponent.props.value = \"40\";\n newComponent.props.max = \"100\";\n break;\n case 'slider':\n newComponent.props.value = \"50\";\n break;\n case 'toggle':\n break;\n default:\n newComponent.props.children = 'Component';\n }\n \n setComponents([...components, newComponent]);\n };\n \n const deleteComponent = (id) => {\n setComponents(components.filter(c => c.id !== id));\n };\n \n const editComponent = (id) => {\n setEditingId(id);\n };\n \n const updateComponent = (id, newProps) => {\n setComponents(components.map(c => \n c.id === id ? { ...c, props: { ...c.props, ...newProps } } : c\n ));\n setEditingId(null);\n };\n \n const handleDragStart = (e, id) => {\n setDraggedId(id);\n e.dataTransfer.effectAllowed = 'move';\n };\n \n const handleDragOver = (e) => {\n e.preventDefault();\n e.dataTransfer.dropEffect = 'move';\n };\n \n const handleDrop = (e, targetId) => {\n e.preventDefault();\n \n if (draggedId === targetId) return;\n \n const draggedIndex = components.findIndex(c => c.id === draggedId);\n const targetIndex = components.findIndex(c => c.id === targetId);\n \n if (draggedIndex < 0 || targetIndex < 0) return;\n \n const newComponents = [...components];\n const [removed] = newComponents.splice(draggedIndex, 1);\n newComponents.splice(targetIndex, 0, removed);\n \n setComponents(newComponents);\n setDraggedId(null);\n };\n\n const renderComponent = (component) => {\n const { id, type, props, style } = component;\n const isEditing = id === editingId;\n \n const componentProps = {\n ...props,\n style,\n draggable: true,\n onDragStart: (e) => handleDragStart(e, id),\n onDragOver: handleDragOver,\n onDrop: (e) => handleDrop(e, id),\n };\n \n let renderedComponent;\n switch(type) {\n case 'button':\n renderedComponent = ;\n break;\n case 'input':\n renderedComponent = ;\n break;\n case 'textarea':\n renderedComponent = ;\n break;\n case 'checkbox':\n renderedComponent = ;\n break;\n case 'card':\n renderedComponent = ;\n break;\n case 'progress':\n renderedComponent = ;\n break;\n case 'slider':\n renderedComponent = ;\n break;\n case 'toggle':\n renderedComponent = ;\n break;\n default:\n renderedComponent =

{props.children || 'Component'}

;\n }\n \n return (\n

\n {renderedComponent}\n

\n \n \n

\n \n {isEditing && (\n

Edit {type}

\n {type === 'button' || type === 'checkbox' || type === 'card' ? (\n

\n Text Content:\n updateComponent(id, { children: e.target.value })}\n />\n

\n ) : null}\n \n {type === 'input' || type === 'textarea' ? (\n

\n Placeholder:\n updateComponent(id, { placeholder: e.target.value })}\n />\n

\n ) : null}\n \n {type === 'progress' || type === 'slider' ? (\n

\n Value:\n updateComponent(id, { value: e.target.value })}\n />\n {props.value}%\n

\n ) : null}\n \n {type === 'checkbox' || type === 'toggle' ? (\n

\n Checked:\n updateComponent(id, { checked: e.target.checked })}\n />\n

\n ) : null}\n \n

\n \n

\n )}\n

\n );\n };\n \n const generateCode = () => {\n return components.map(c => {\n const { type, props, style } = c;\n let attributes = Object.entries(props)\n .filter(([key]) => key !== 'children')\n .map(([key, value]) => `${key}=\"${value}\"`)\n .join(' ');\n \n // Add corner radius style\n const cornerRadiusStyle = `style=\"--wired-corner-radius: ${cornerRadius}px; --wired-color: ${selectedColor};\"`;\n \n if (props.children && typeof props.children === 'string') {\n return `${props.children}`;\n } else {\n return ``;\n }\n }).join('\\n');\n };\n\n return (\n

Wired Components Playground

Experiment with hand-drawn UI components from the wired-elements library

\n \n

Components

\n \n \n \n \n \n \n \n \n

\n \n

Colors

\n {['#ff5252', '#7c4dff', '#448aff', '#64dd17', '#ffd600', '#ff6d00', '#455a64', '#616161'].map(color => (\n

setSelectedColor(color)}\n >

\n ))}\n

\n \n

Styling

\n \n Corner Radius: {cornerRadius}px\n \n setCornerRadius(Number(e.target.value))}\n />\n

\n \n

Playground

\n {components.map(component => renderComponent(component))}\n

\n \n \n

\n );\n}\n\nfunction client() {\n createRoot(document.getElementById(\"root\")).render();\n}\n\nif (typeof document !== \"undefined\") {\n client();\n}\n\nexport default async function server(request: Request): Promise {\n return new Response(`\n \n \n \n \n \n Wired Components Playground\n \n \n \n \n

\n \n \n \n \n `,\n {\n headers: {\n \"content-type\": \"text/html\",\n },\n });\n}\n\nconst css = `\n :root {\n --primary-color: #455a64;\n --secondary-color: #7c4dff;\n --background-color: #f5f5f5;\n --card-background: #ffffff;\n --text-color: #333;\n }\n\n * {\n box-sizing: border-box;\n }\n\n body {\n margin: 0;\n padding: 0;\n font-family: 'Architects Daughter', cursive;\n background-color: var(--background-color);\n color: var(--text-color);\n line-height: 1.6;\n }\n\n .container {\n max-width: 1200px;\n margin: 0 auto;\n padding: 20px;\n display: flex;\n flex-direction: column;\n min-height: 100vh;\n }\n\n header {\n text-align: center;\n margin-bottom: 30px;\n }\n\n h1 {\n font-size: 2.5rem;\n margin-bottom: 10px;\n color: var(--primary-color);\n }\n\n h2 {\n font-size: 1.8rem;\n margin-bottom: 15px;\n color: var(--primary-color);\n }\n\n h3 {\n font-size: 1.4rem;\n margin-bottom: 10px;\n color: var(--primary-color);\n }\n\n main {\n display: flex;\n gap: 20px;\n flex: 1;\n }\n\n .sidebar {\n width: 300px;\n flex-shrink: 0;\n }\n\n .components-panel, .colors-panel, .styling-panel {\n background-color: var(--card-background);\n border-radius: 8px;\n padding: 15px;\n margin-bottom: 20px;\n box-shadow: 0 2px 4px rgba(0,0,0,0.1);\n }\n\n .component-buttons {\n display: flex;\n flex-direction: column;\n gap: 15px;\n }\n\n .component-buttons button {\n background: none;\n border: none;\n cursor: pointer;\n padding: 0;\n text-align: left;\n }\n\n .component-buttons wired-button,\n .component-buttons wired-input,\n .component-buttons wired-textarea,\n .component-buttons wired-checkbox,\n .component-buttons wired-card,\n .component-buttons wired-progress,\n .component-buttons wired-slider,\n .component-buttons wired-toggle {\n width: 100%;\n }\n\n .color-options {\n display: grid;\n grid-template-columns: repeat(4, 1fr);\n gap: 10px;\n }\n\n .color-option {\n width: 40px;\n height: 40px;\n border-radius: 50%;\n cursor: pointer;\n transition: transform 0.2s;\n }\n\n .color-option:hover {\n transform: scale(1.1);\n }\n\n .color-option.selected {\n border: 3px solid var(--primary-color);\n }\n\n .playground {\n flex: 1;\n background-color: var(--card-background);\n border-radius: 8px;\n padding: 20px;\n box-shadow: 0 2px 4px rgba(0,0,0,0.1);\n }\n\n .playground-canvas {\n min-height: 400px;\n border: 2px dashed #ddd;\n border-radius: 4px;\n padding: 20px;\n position: relative;\n }\n\n .component-wrapper {\n display: inline-block;\n margin: 10px;\n position: relative;\n vertical-align: top;\n }\n\n .component-controls {\n position: absolute;\n top: -15px;\n right: -15px;\n display: flex;\n gap: 5px;\n opacity: 0;\n transition: opacity 0.2s;\n }\n\n .component-wrapper:hover .component-controls {\n opacity: 1;\n }\n\n .edit-btn, .delete-btn {\n background: none;\n border: none;\n font-size: 16px;\n cursor: pointer;\n padding: 0;\n width: 24px;\n height: 24px;\n border-radius: 50%;\n background-color: rgba(255, 255, 255, 0.8);\n display: flex;\n align-items: center;\n justify-content: center;\n }\n\n .edit-dialog {\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background-color: rgba(0, 0, 0, 0.5);\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 1000;\n }\n\n .edit-dialog-content {\n background-color: var(--card-background);\n padding: 20px;\n border-radius: 8px;\n width: 90%;\n max-width: 400px;\n }\n\n .form-group {\n margin-bottom: 15px;\n }\n\n .form-group label {\n display: block;\n margin-bottom: 5px;\n }\n\n .form-group input {\n width: 100%;\n padding: 8px;\n border: 1px solid #ddd;\n border-radius: 4px;\n font-family: inherit;\n }\n\n .edit-dialog-actions {\n display: flex;\n justify-content: flex-end;\n margin-top: 20px;\n }\n\n .edit-dialog-actions button {\n padding: 8px 16px;\n border: none;\n border-radius: 4px;\n background-color: var(--secondary-color);\n color: white;\n cursor: pointer;\n }\n\n footer {\n margin-top: 30px;\n text-align: center;\n }\n\n .code-toggle {\n padding: 8px 16px;\n background-color: var(--secondary-color);\n color: white;\n border: none;\n border-radius: 4px;\n cursor: pointer;\n margin-bottom: 20px;\n }\n\n .code-panel {\n background-color: var(--card-background);\n border-radius: 8px;\n padding: 20px;\n margin-bottom: 20px;\n box-shadow: 0 2px 4px rgba(0,0,0,0.1);\n }\n\n .code-output {\n background-color: #f0f0f0;\n padding: 15px;\n border-radius: 4px;\n overflow-x: auto;\n white-space: pre-wrap;\n font-family: monospace;\n }\n\n .source-link {\n margin-top: 20px;\n }\n\n .source-link a {\n color: var(--secondary-color);\n text-decoration: none;\n }\n\n .source-link a:hover {\n text-decoration: underline;\n }\n\n .loading {\n display: flex;\n justify-content: center;\n align-items: center;\n height: 100vh;\n font-size: 1.5rem;\n color: var(--primary-color);\n }\n\n @media (max-width: 768px) {\n main {\n flex-direction: column;\n }\n\n .sidebar {\n width: 100%;\n }\n }\n`;\n","deleted","label",[98],"permalink","https://www.val.town/x/dcm31/wiredReactPlayground/code/main.tsx","extension","actionData","errors"]