Spaces:
Running
Running
| import { Briefcase, FileCheck2, FileUser, History, LayoutDashboard, LogOut, Menu, Moon, Plus, Search, Settings, Sun, UploadCloud, X } from "lucide-react"; | |
| import { useState, type ReactNode } from "react"; | |
| import { Link, NavLink, useNavigate } from "react-router-dom"; | |
| import { useAuth } from "../lib/auth"; | |
| import { useI18n } from "../lib/i18n"; | |
| import { Logo, useTheme } from "./ui"; | |
| export function LangSwitch() { | |
| const { lang, setLang } = useI18n(); | |
| return ( | |
| <button onClick={() => setLang(lang === "ar" ? "en" : "ar")} className="rounded-lg px-2.5 py-1.5 text-sm font-medium text-muted hover:bg-sunken hover:text-ink" | |
| aria-label="Change language"> | |
| {lang === "ar" ? "English" : "العربية"} | |
| </button> | |
| ); | |
| } | |
| export function ThemeSwitch() { | |
| const [dark, toggle] = useTheme(); | |
| const { t } = useI18n(); | |
| return ( | |
| <button onClick={toggle} className="rounded-lg p-2 text-muted hover:bg-sunken hover:text-ink" aria-label={dark ? t("theme_light") : t("theme_dark")}> | |
| {dark ? <Sun size={18} /> : <Moon size={18} />} | |
| </button> | |
| ); | |
| } | |
| export function PublicHeader() { | |
| const { profile } = useAuth(); | |
| const { t } = useI18n(); | |
| return ( | |
| <header className="mx-auto flex max-w-6xl items-center justify-between gap-2 px-3 py-5 sm:gap-4 sm:px-6"> | |
| <Link to="/" aria-label="EvalBot home"><Logo /></Link> | |
| <nav className="flex items-center gap-1 sm:gap-2"> | |
| <Link to="/jobs" className="hidden rounded-xl px-3 py-2 text-sm font-medium text-ink hover:bg-sunken sm:inline-block">{t("browse_jobs")}</Link> | |
| <LangSwitch /> | |
| <span className="hidden sm:inline-flex"><ThemeSwitch /></span> | |
| {profile ? ( | |
| <Link to="/app" className="rounded-xl bg-nile px-4 py-2 text-sm font-medium text-white dark:text-paper">{t("nav_dashboard")}</Link> | |
| ) : ( | |
| <> | |
| <Link to="/login" className="whitespace-nowrap rounded-xl border border-line bg-surface px-2.5 py-2 text-sm font-medium text-ink hover:border-nile hover:text-nile sm:px-3.5">{t("sign_in")}</Link> | |
| <Link to="/signup" className="whitespace-nowrap rounded-xl bg-nile px-2.5 py-2 text-sm font-medium text-white hover:bg-nile-deep sm:px-3.5 dark:text-paper">{t("sign_up")}</Link> | |
| </> | |
| )} | |
| </nav> | |
| </header> | |
| ); | |
| } | |
| export function AppShell({ children }: { children: ReactNode }) { | |
| const { profile, signOut } = useAuth(); | |
| const { t } = useI18n(); | |
| const nav = useNavigate(); | |
| const [open, setOpen] = useState(false); | |
| const isRecruiter = profile?.role === "recruiter"; | |
| const links = isRecruiter | |
| ? [ | |
| { to: "/app", icon: LayoutDashboard, label: t("nav_overview"), end: true }, | |
| { to: "/app/jobs", icon: Briefcase, label: t("nav_jobs") }, | |
| ] | |
| : [ | |
| { to: "/app", icon: LayoutDashboard, label: t("nav_dashboard"), end: true }, | |
| { to: "/app/board", icon: Search, label: t("nav_board") }, | |
| { to: "/app/applications", icon: FileCheck2, label: t("nav_applications") }, | |
| { to: "/app/cv", icon: FileUser, label: t("nav_cv") }, | |
| { to: "/app/new", icon: Plus, label: t("nav_new") }, | |
| { to: "/app/history", icon: History, label: t("nav_history") }, | |
| ]; | |
| const item = "flex items-center gap-3 rounded-xl px-3 py-2.5 text-[15px] font-medium transition-colors"; | |
| const sidebar = ( | |
| <div className="flex h-full flex-col gap-1 p-4"> | |
| <Link to="/" className="mb-6 px-2" onClick={() => setOpen(false)}><Logo /></Link> | |
| {links.map((l) => ( | |
| <NavLink key={l.to} to={l.to} end={l.end} onClick={() => setOpen(false)} | |
| className={({ isActive }) => `${item} ${isActive ? "bg-nile-soft text-nile-deep" : "text-muted hover:bg-sunken hover:text-ink"}`}> | |
| <l.icon size={18} /> {l.label} | |
| </NavLink> | |
| ))} | |
| <a href="/demo" className={`${item} text-muted hover:bg-sunken hover:text-ink`}><UploadCloud size={18} /> {t("nav_quick")}</a> | |
| <div className="mt-auto flex flex-col gap-1 border-t border-line pt-3"> | |
| <NavLink to="/app/settings" onClick={() => setOpen(false)} | |
| className={({ isActive }) => `${item} ${isActive ? "bg-nile-soft text-nile-deep" : "text-muted hover:bg-sunken hover:text-ink"}`}> | |
| <Settings size={18} /> {t("nav_settings")} | |
| </NavLink> | |
| <button className={`${item} text-muted hover:bg-sunken hover:text-ink`} onClick={async () => { await signOut(); nav("/"); }}> | |
| <LogOut size={18} className="rtl:rotate-180" /> {t("sign_out")} | |
| </button> | |
| <div className="flex items-center gap-1 px-1 pt-2"><LangSwitch /><ThemeSwitch /></div> | |
| {profile && <p className="truncate px-3 pt-1 text-xs text-muted">{profile.full_name || profile.email}{profile.company ? `, ${profile.company.name}` : ""}</p>} | |
| </div> | |
| </div> | |
| ); | |
| return ( | |
| <div className="min-h-screen lg:flex"> | |
| <aside className="sticky top-0 hidden h-screen w-64 flex-none border-e border-line bg-surface lg:block">{sidebar}</aside> | |
| <div className="flex items-center justify-between border-b border-line bg-surface px-4 py-3 lg:hidden"> | |
| <Link to="/app"><Logo size={24} /></Link> | |
| <button onClick={() => setOpen(true)} className="rounded-lg p-2 text-ink hover:bg-sunken" aria-label="Menu"><Menu size={22} /></button> | |
| </div> | |
| {open && ( | |
| <div className="fixed inset-0 z-40 lg:hidden" role="dialog" aria-modal="true"> | |
| <div className="absolute inset-0 bg-ink/40" onClick={() => setOpen(false)} /> | |
| <div className="absolute inset-y-0 start-0 w-72 bg-surface shadow-xl"> | |
| <button onClick={() => setOpen(false)} className="absolute end-3 top-4 rounded-lg p-2 text-muted hover:bg-sunken" aria-label="Close"><X size={20} /></button> | |
| {sidebar} | |
| </div> | |
| </div> | |
| )} | |
| <main className="min-w-0 flex-1 px-4 py-6 sm:px-8 sm:py-8"> | |
| <div className="mx-auto max-w-5xl">{children}</div> | |
| </main> | |
| </div> | |
| ); | |
| } | |