/** @jsxImportSource https://esm.sh/react@18.2.0 */ import React, { useState } from "https://esm.sh/react@18.2.0"; import { createRoot } from "https://esm.sh/react-dom@18.2.0/client"; // Accordion Component function Accordion() { const [activeIndex, setActiveIndex] = useState(null); const sections = [ { title: "Getting Started", content: "Learn the basics of our application and how to navigate through its features." }, { title: "Advanced Features", content: "Explore advanced functionalities and tips for power users." } ]; return (

{sections.map((section, index) => (

{activeIndex === index && (

{section.content}

)}

))}

); } // Dialog Component function Dialog() { const [isOpen, setIsOpen] = useState(false); return (

{isOpen && (

Welcome

This is a sample dialog with some important information.

)}

); } // Checkbox Component function Checkbox() { const [isChecked, setIsChecked] = useState(false); return (

setIsChecked(!isChecked)} className="checkbox-input" /> {isChecked ? '✓' : ''} Subscribe to newsletter

); } // Switch Component function Switch() { const [isOn, setIsOn] = useState(false); return (

setIsOn(!isOn)} className="switch-input" /> {isOn ? 'Enabled' : 'Disabled'}

); } // Tabs Component function Tabs() { const [activeTab, setActiveTab] = useState(0); const tabs = [ { title: "Profile", content: "View and edit your personal information." }, { title: "Settings", content: "Customize your application preferences." } ]; return (

{tabs.map((tab, index) => ( ))}

{tabs[activeTab].content}

); } // Tooltip Component function Tooltip() { const [isVisible, setIsVisible] = useState(false); return (

); } // Progress Bar Component function ProgressBar() { const [progress, setProgress] = useState(0); const handleProgressChange = () => { const newProgress = progress < 100 ? progress + 25 : 0; setProgress(newProgress); }; return (

{progress}%

); } // Radio Button Group Component function RadioButtonGroup() { const [selectedOption, setSelectedOption] = useState(''); const options = [ { value: 'option1', label: 'Option 1' }, { value: 'option2', label: 'Option 2' }, { value: 'option3', label: 'Option 3' } ]; return (

{options.map((option) => ( setSelectedOption(option.value)} className="radio-input" /> {option.label} ))}

Selected Option: {selectedOption || 'None'}

); } // Main App Component function App() { return (

UI Component Playground

Accordion

Dialog

Checkbox

Switch

Tabs

Tooltip

Progress Bar

Radio Button Group

); } // Client-side rendering function client() { createRoot(document.getElementById("root")).render(); } if (typeof document !== "undefined") { client(); } // Server-side rendering export default async function server(request: Request): Promise { return new Response(` UI Components Playground

`, { headers: { "content-type": "text/html", }, }); } // CSS Styles const css = ` body { font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; line-height: 1.6; margin: 0; padding: 20px; background-color: #f4f4f4; } .app-container { max-width: 800px; margin: 0 auto; background-color: white; padding: 20px; border-radius: 8px; box-shadow: 0 4px 6px rgba(0,0,0,0.1); } .components-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; } section { background-color: #f9f9f9; border-radius: 6px; padding: 15px; border: 1px solid #e0e0e0; } /* Accordion Styles */ .accordion-item { margin-bottom: 10px; border: 1px solid #e0e0e0; border-radius: 4px; } .accordion-header { width: 100%; text-align: left; padding: 10px; display: flex; justify-content: space-between; align-items: center; background-color: #f0f0f0; border: none; cursor: pointer; } .accordion-content { padding: 10px; background-color: white; } /* Dialog Styles */ .dialog-container button { background-color: #007bff; color: white; border: none; padding: 10px 15px; border-radius: 4px; cursor: pointer; } .dialog-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.5); display: flex; justify-content: center; align-items: center; } .dialog { background-color: white; border-radius: 8px; width: 400px; max-width: 90%; padding: 20px; } .dialog-header { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #e0e0e0; padding-bottom: 10px; } .dialog-close { background: none; border: none; font-size: 20px; cursor: pointer; } /* Checkbox Styles */ .checkbox-wrapper { display: flex; align-items: center; cursor: pointer; } .checkbox-input { display: none; } .checkbox-label { width: 20px; height: 20px; border: 2px solid #007bff; margin-right: 10px; display: inline-flex; align-items: center; justify-content: center; color: white; background-color: white; } .checkbox-input:checked + .checkbox-label { background-color: #007bff; } /* Switch Styles */ .switch-container { display: flex; align-items: center; } .switch { position: relative; display: inline-block; width: 50px; height: 24px; margin-right: 10px; } .switch-input { opacity: 0; width: 0; height: 0; } .switch-slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; transition: .4s; border-radius: 34px; } .switch-slider:before { position: absolute; content: ""; height: 16px; width: 16px; left: 4px; bottom: 4px; background-color: white; transition: .4s; border-radius: 50%; } .switch-input:checked + .switch-slider { background-color: #2196F3; } .switch-input:checked + .switch-slider:before { transform: translateX(26px); } /* Tabs Styles */ .tabs-header { display: flex; border-bottom: 1px solid #e0e0e0; } .tab-button { padding: 10px 15px; border: none; background-color: transparent; cursor: pointer; } .tab-button.active { border-bottom: 2px solid #007bff; color: #007bff; } .tabs-content { padding: 15px; background-color: white; } /* Tooltip Styles */ .tooltip-container { position: relative; display: inline-block; } .tooltip-trigger { position: relative; padding: 10px 15px; background-color: #007bff; color: white; border: none; border-radius: 4px; cursor: pointer; } .tooltip-text { visibility: visible; position: absolute; bottom: 125%; left: 50%; transform: translateX(-50%); background-color: #333; color: white; text-align: center; border-radius: 6px; padding: 5px 10px; z-index: 1; opacity: 1; transition: opacity 0.3s; } /* Progress Bar Styles */ .progress-container { display: flex; align-items: center; gap: 10px; } .progress-bar { height: 20px; background-color: #2196F3; border-radius: 10px; transition: width 0.5s ease; } .progress-button { background-color: #4CAF50; color: white; border: none; padding: 5px 10px; border-radius: 4px; cursor: pointer; } .progress-label { font-weight: bold; } /* Radio Button Styles */ .radio-group-container { display: flex; flex-direction: column; gap: 10px; } .radio-label { display: flex; align-items: center; cursor: pointer; position: relative; padding-left: 30px; } .radio-input { position: absolute; opacity: 0; cursor: pointer; } .radio-custom { position: absolute; top: 0; left: 0; height: 20px; width: 20px; background-color: #eee; border-radius: 50%; border: 2px solid #007bff; } .radio-input:checked + .radio-custom { background-color: #007bff; } .radio-input:checked + .radio-custom::after { content: ""; position: absolute; display: block; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 8px; height: 8px; border-radius: 50%; background: white; } `;

uiComponentPlayground