86 lines
4.0 KiB
TypeScript
86 lines
4.0 KiB
TypeScript
import type { Component } from 'solid-js';
|
|
import { A, useLocation, useNavigate } from '@solidjs/router';
|
|
import { Show } from 'solid-js';
|
|
import { authStore } from './store/authStore';
|
|
import { appStore } from './store/appStore';
|
|
|
|
interface AppContainerProps {
|
|
children?: any;
|
|
}
|
|
|
|
const AppContainer: Component<AppContainerProps> = (props) => {
|
|
const location = useLocation();
|
|
const navigate = useNavigate();
|
|
|
|
const handleLogout = () => {
|
|
authStore.logout();
|
|
navigate('/login');
|
|
};
|
|
|
|
return (
|
|
<div class="min-h-screen bg-gray-50/50">
|
|
{/* Top Navigation Bar */}
|
|
<Show when={location.pathname !== '/login'}>
|
|
<header class="bg-white border-b border-gray-200 sticky top-0 z-10 no-print">
|
|
<div class="max-w-[1800px] w-full mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div class="flex justify-between h-16">
|
|
<div class="flex items-center gap-8">
|
|
<div class="flex-shrink-0 flex items-center">
|
|
<button
|
|
onClick={() => {
|
|
appStore.resetEstimate();
|
|
navigate('/');
|
|
}}
|
|
class="font-bold text-xl text-gray-900 tracking-tight hover:text-blue-600 transition-colors"
|
|
>
|
|
EstiMaker
|
|
</button>
|
|
</div>
|
|
<nav class="flex space-x-4">
|
|
<A
|
|
href="/"
|
|
class="inline-flex items-center px-3 py-2 text-sm font-medium text-gray-600 hover:text-gray-900 hover:bg-gray-50 rounded-md transition-colors"
|
|
activeClass="text-blue-600 bg-blue-50 hover:bg-blue-50 hover:text-blue-700"
|
|
end={true}
|
|
>
|
|
Item Extractor
|
|
</A>
|
|
<A
|
|
href="/templates"
|
|
class="inline-flex items-center px-3 py-2 text-sm font-medium text-gray-600 hover:text-gray-900 hover:bg-gray-50 rounded-md transition-colors"
|
|
activeClass="text-blue-600 bg-blue-50 hover:bg-blue-50 hover:text-blue-700"
|
|
>
|
|
Template Creator
|
|
</A>
|
|
<A
|
|
href="/standard-pricing"
|
|
class="inline-flex items-center px-3 py-2 text-sm font-medium text-gray-600 hover:text-gray-900 hover:bg-gray-50 rounded-md transition-colors"
|
|
activeClass="text-blue-600 bg-blue-50 hover:bg-blue-50 hover:text-blue-700"
|
|
>
|
|
Standard Pricing
|
|
</A>
|
|
</nav>
|
|
</div>
|
|
<div class="flex items-center gap-4">
|
|
<button
|
|
onClick={handleLogout}
|
|
class="inline-flex items-center px-3 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 shadow-sm transition-colors"
|
|
>
|
|
Sign out
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
</Show>
|
|
|
|
{/* Main Content Area */}
|
|
<main class="max-w-[1800px] w-full mx-auto p-4 sm:p-6 lg:p-8">
|
|
{props.children}
|
|
</main>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default AppContainer;
|