\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","children",[],[149],"files",[147],"counts",{"_170":33,"_171":123,"_172":33,"_173":33},"pulls","branches","forks","envVars","contents",[176],{"_106":148,"_99":149,"_150":119,"_151":-5,"_152":139,"_153":138,"_154":112,"_108":177,"_103":156,"_157":158,"_159":160,"_161":27,"_162":-5,"_102":178},["D",1738835437836],[149],"file","upstream","screenshots","emptyEnvVars","isNew","routes/_app.x.$handle.$name.branch.$branch.history",{"_97":98,"_99":100,"_101":43,"_104":186,"_190":191,"_232":33,"_233":27},{"_106":107,"_99":100,"_108":187,"_110":-5,"_111":112,"_113":114,"_115":-5,"_116":-5,"_12":117,"_118":119,"_120":112,"_121":-5,"_122":123,"_124":125,"_126":125,"_127":128,"_129":128,"_130":128,"_131":125,"_132":27,"_21":188,"_136":189},["D",1746192179957],{"_97":98,"_134":135},{"_103":138,"_99":43,"_106":139,"_140":107,"_141":-5,"_142":-5,"_143":-5,"_144":-5},"history",[192,197,205,213,220,226],{"_150":119,"_103":138,"_108":193,"_152":139,"_166":194},["D",1738835437836],[195],{"_106":148,"_152":139,"_150":119,"_99":149,"_159":160,"_157":158,"_103":156,"_151":-5,"_108":193,"_153":138,"_162":-5,"_154":112,"_161":27,"_102":196},[149],{"_150":119,"_103":156,"_108":198,"_152":139,"_166":199},["D",1738835365562],[200],{"_106":201,"_152":139,"_150":119,"_99":149,"_159":202,"_157":158,"_103":203,"_151":-5,"_108":198,"_153":156,"_162":-5,"_154":27,"_161":27,"_102":204},"918f64f4-2758-11f0-86ff-569c3dd06744","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState } from \"https://esm.sh/react@18.2.0\";\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\n\n// Accordion Component\nfunction Accordion() {\n const [activeIndex, setActiveIndex] = useState(null);\n \n const sections = [\n { \n title: \"Getting Started\", \n content: \"Learn the basics of our application and how to navigate through its features.\" \n },\n { \n title: \"Advanced Features\", \n content: \"Explore advanced functionalities and tips for power users.\" \n }\n ];\n\n return (\n

\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 {tabs.map((tab, index) => (\n setActiveTab(index)}\n >\n {tab.title}\n \n ))}\n

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

\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

\n \n {progress}%\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// [Rest of the existing code remains unchanged]\n\n// Additional CSS for new components\nconst additionalCss = `\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`;\n\n// Append additional CSS to existing CSS\nconst css = css + additionalCss;",3,[149],{"_150":119,"_103":211,"_108":214,"_152":139,"_166":215},["D",1738835288718],[216],{"_106":217,"_152":139,"_150":119,"_99":149,"_159":218,"_157":158,"_103":94,"_151":-5,"_108":214,"_153":211,"_162":-5,"_154":27,"_161":27,"_102":219},"9184cbf2-2758-11f0-86ff-569c3dd06744","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState } from \"https://esm.sh/react@18.2.0\";\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\n\n// [Previous components remain unchanged from earlier implementation]\n\n// CSS Styles\nconst baseCss = `\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\n// Additional CSS for new components\nconst additionalCss = `\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`;\n\n// Combine CSS\nconst css = baseCss + additionalCss;\n\n// [Rest of the code remains the same as in the previous implementation]",[149],{"_150":119,"_103":94,"_108":221,"_152":139,"_166":222},["D",1738835246355],[223],{"_106":224,"_152":139,"_150":119,"_99":149,"_159":210,"_157":158,"_103":123,"_151":-5,"_108":221,"_153":94,"_162":-5,"_154":27,"_161":27,"_102":225},"917fd4e4-2758-11f0-86ff-569c3dd06744",[149],{"_150":119,"_103":123,"_108":227,"_152":139,"_166":228},["D",1738835155912],[229],{"_106":230,"_152":139,"_150":119,"_99":149,"_159":202,"_157":158,"_103":33,"_151":-5,"_108":227,"_153":123,"_162":-5,"_154":27,"_161":27,"_102":231},"917a8ec6-2758-11f0-86ff-569c3dd06744",[149],"page","hasNext","routes/_app","actionData","errors"]

History