make a web page for restaurant managing just like toast the restaurant managing application can you make it for me for my own restaurant
1b4923e
verified
| class CustomMenuSection extends HTMLElement { | |
| connectedCallback() { | |
| this.attachShadow({ mode: 'open' }); | |
| this.render(); | |
| window.restaurantApp.eventBus.addEventListener('dataUpdated', () => this.render()); | |
| } | |
| render() { | |
| const data = window.restaurantApp.getData(); | |
| this.shadowRoot.innerHTML = ` | |
| <style> | |
| .menu-item { | |
| transition: all 0.2s ease; | |
| } | |
| .menu-item:hover { | |
| transform: translateY(-2px); | |
| } | |
| .category-tab { | |
| transition: all 0.2s ease; | |
| } | |
| .category-tab.active { | |
| background-color: #6366f1; | |
| color: white; | |
| } | |
| </style> | |
| <div class="bg-gray-800 rounded-xl shadow p-6"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h2 class="text-xl font-semibold">Menu Items</h2> | |
| <button class="text-primary-500 hover:text-primary-400 flex items-center"> | |
| <span>View All</span> | |
| <i data-feather="chevron-right" class="ml-1"></i> | |
| </button> | |
| </div> | |
| <div class="flex space-x-2 mb-4 overflow-x-auto pb-2"> | |
| <button class="category-tab active px-4 py-2 rounded-full text-sm font-medium">All</button> | |
| <button class="category-tab px-4 py-2 rounded-full text-sm font-medium bg-gray- |