Lachlan McMurtrie
The app is a collaborative component builder. it begin by starting a project, entering in a description. the next page will be an ai assisted project scope, where the user will type the component type, which will be a list of core components (all that are core across ui domains). The ai will then ask for a framework of native react or react for web. the behavioral hooks, interactions and utilites that align with the component will then be showed. for web, these must be all react-aria, for native, these will be react-native. assume react-shared types for cross platform as common, as well as react-stately for states which are also cross platform. provide the user with a the data attributes as per react-aria or native equivilant documentation, ask them how they want to recieve their code files - combined as typed primitives, or separated through the use of an adapter that exports the behaviors etc to the primitive.
499a14d verified | class CustomHeader extends HTMLElement { | |
| connectedCallback() { | |
| this.attachShadow({ mode: 'open' }); | |
| this.shadowRoot.innerHTML = ` | |
| <style> | |
| header { | |
| background: rgba(17, 24, 39, 0.8); | |
| backdrop-filter: blur(10px); | |
| border-bottom: 1px solid rgba(55, 65, 81, 0.5); | |
| } | |
| .container { | |
| max-width: 1200px; | |
| margin: 0 auto; | |
| padding: 0 1rem; | |
| } | |
| nav { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| padding: 1rem 0; | |
| } | |
| .logo { | |
| font-weight: 700; | |
| font-size: 1.5rem; | |
| background: linear-gradient(135deg, #a855f7, #ec4899); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| background-clip: text; | |
| } | |
| .nav-links { | |
| display: flex; | |
| align-items: center; | |
| gap: 2rem; | |
| } | |
| .nav-link { | |
| color: #d1d5db; | |
| text-decoration: none; | |
| transition: color 0.2s; | |
| } | |
| .nav-link:hover { | |
| color: white; | |
| } | |
| .theme-toggle { | |
| background: none; | |
| border: none; | |
| color: #d1d5db; | |
| cursor: pointer; | |
| padding: 0.5rem; | |
| border-radius: 0.375rem; | |
| transition: all 0.2s; | |
| } | |
| .theme-toggle:hover { | |
| color: white; | |
| background: rgba(55, 65, 81, 0.5); | |
| } | |
| @media (max-width: 768px) { | |
| .nav-links { | |
| gap: 1rem; | |
| } | |
| } | |
| </style> | |
| <header> | |
| <div class="container"> | |
| <nav> | |
| <a href="index.html" class="logo">ComponentForge</a> | |
| <div class="nav-links"> | |
| <a href="index.html" class="nav-link">New Project</a> | |
| <a href="#" class="nav-link">Templates</a> | |
| <a href="#" class="nav-link">Docs</a> | |
| <button class="theme-toggle" id="themeToggle"> | |
| <i data-feather="moon"></i> | |
| </button> | |
| </div> | |
| </nav> | |
| </div> | |
| </header> | |
| `; | |
| // Initialize feather icons in shadow DOM | |
| const featherScript = document.createElement('script'); | |
| featherScript.src = 'https://unpkg.com/feather-icons'; | |
| this.shadowRoot.appendChild(featherScript); | |
| featherScript.onload = () => { | |
| feather.replace(); | |
| // Theme toggle functionality | |
| const themeToggle = this.shadowRoot.getElementById('themeToggle'); | |
| themeToggle.addEventListener('click', () => { | |
| themeManager.toggleTheme(); | |
| this.updateThemeIcon(); | |
| }); | |
| }; | |
| } | |
| updateThemeIcon() { | |
| const themeIcon = this.shadowRoot.querySelector('#themeToggle i'); | |
| if (themeManager.currentTheme === 'dark') { | |
| themeIcon.setAttribute('data-feather', 'sun'); | |
| } else { | |
| themeIcon.setAttribute('data-feather', 'moon'); | |
| } | |
| feather.replace(); | |
| } | |
| } | |
| customElements.define('custom-header', CustomHeader); |