feat(frontend): scaffold Tailwind design system + routing + auth callback
- Tailwind v3 + PostCSS + autoprefixer - BrowserRouter with Layout shell (Header, theme toggle dark/light) - Pages: HomePage, CallbackPage (SuperOAuth callback handler) - hooks/useAuth.ts + lib/api.ts (API client base) - styles/index.css (Tailwind directives) - Theme persisted in localStorage (od-theme)
This commit is contained in:
25
frontend/src/components/layout/Layout.tsx
Normal file
25
frontend/src/components/layout/Layout.tsx
Normal file
@@ -0,0 +1,25 @@
|
||||
import { Outlet } from 'react-router-dom';
|
||||
import Header from './Header';
|
||||
import { useAuth } from '../../hooks/useAuth';
|
||||
|
||||
interface LayoutProps {
|
||||
theme: 'dark' | 'light';
|
||||
onToggleTheme: () => void;
|
||||
}
|
||||
|
||||
export default function Layout({ theme, onToggleTheme }: LayoutProps) {
|
||||
const { user, loading } = useAuth();
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-od-bg text-od-text">
|
||||
<Header
|
||||
theme={theme}
|
||||
onToggleTheme={onToggleTheme}
|
||||
user={loading ? null : user}
|
||||
/>
|
||||
<main className="mx-auto max-w-5xl px-4 py-8">
|
||||
<Outlet />
|
||||
</main>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user