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

\n \n {activeIndex === index && (\n

\n {section.content}\n

\n )}\n

\n ))}\n

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

\n \n {isOpen && (\n

Welcome

\n \n

This is a sample dialog with some important information.

\n )}\n

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

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

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

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

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

\n {tabs.map((tab, index) => (\n setActiveTab(index)}\n >\n {tab.title}\n \n ))}\n

\n {tabs[activeTab].content}\n

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

\n \n

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

\n \n {progress}%\n

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

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

Selected Option: {selectedOption || 'None'}

\n );\n}\n\n// Main App Component\nfunction App() {\n return (\n

UI Component Playground

Accordion

\n \n

Dialog

Checkbox

\n \n

Switch

\n \n

Tabs

\n \n

Tooltip

\n \n

Progress Bar

\n \n

Radio Button Group

\n \n

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

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