Loading TravelEase...

\n );\n }\n\n // Navigation header (shown when logged in)\n const renderNavigation = () => {\n if (!state.user) return null;\n\n const navItems = [\n { key: 'dashboard', label: 'Dashboard', icon: '🏠' },\n { key: 'destinations', label: 'Destinations', icon: '🗺️' },\n { key: 'booking', label: 'Book Travel', icon: '✈️' },\n { key: 'about', label: 'About', icon: 'ℹ️' },\n { key: 'feedback', label: 'Feedback', icon: '💬' }\n ];\n\n return (\n

\n ✈️ TravelEase\n

\n {navItems.map(item => (\n navigateTo(item.key as Page)}\n className={`inline-flex items-center px-1 pt-1 text-sm font-medium transition-colors duration-200 ${\n state.currentPage === item.key\n ? 'text-purple-600 border-b-2 border-purple-600'\n : 'text-gray-500 hover:text-gray-700 hover:border-gray-300'\n }`}\n >\n {item.icon}\n {item.label}\n \n ))}\n

\n \n

\n Hello, {state.user.name}\n \n Logout\n \n

\n \n {/* Mobile navigation */}\n

\n {navItems.map(item => (\n navigateTo(item.key as Page)}\n className={`block w-full text-left px-3 py-2 rounded-md text-base font-medium transition-colors duration-200 ${\n state.currentPage === item.key\n ? 'text-purple-600 bg-purple-50'\n : 'text-gray-500 hover:text-gray-700 hover:bg-gray-100'\n }`}\n >\n {item.icon}\n {item.label}\n \n ))}\n

\n );\n };\n\n // Notification component\n const renderNotification = () => {\n if (!notification) return null;\n\n const bgColor = {\n success: 'bg-green-500',\n error: 'bg-red-500',\n info: 'bg-blue-500'\n }[notification.type];\n\n return (\n

\n \n {notification.type === 'success' && '✅'}\n {notification.type === 'error' && '❌'}\n {notification.type === 'info' && 'ℹ️'}\n \n {notification.message}\n setNotification(null)}\n className=\"ml-2 text-white hover:text-gray-200\"\n >\n ✕\n \n

\n );\n };\n\n // Render current page\n const renderCurrentPage = () => {\n const commonProps = {\n user: state.user,\n token: state.token,\n navigateTo,\n showNotification\n };\n\n switch (state.currentPage) {\n case 'login':\n return ;\n case 'dashboard':\n return ;\n case 'destinations':\n return ;\n case 'booking':\n return ;\n case 'payment':\n return (\n \n );\n case 'about':\n return ;\n case 'feedback':\n return ;\n default:\n return ;\n }\n };\n\n return (\n

\n {renderNavigation()}\n {renderNotification()}\n

\n {renderCurrentPage()}\n

\n );\n}","deleted","label",[169,170,152],"frontend","components","permalink","https://www.val.town/x/Tarunkumar/Tarun/code/frontend/components/App.tsx","extension","actionData","errors"]