54 lines
3.5 KiB
JavaScript
54 lines
3.5 KiB
JavaScript
import React from 'react'
|
|
import { Outlet, Link, useNavigate } from 'react-router-dom'
|
|
import { BookOpen, Gift, Home, LogOut, Printer, Search, Upload, Wallet, Download, PlusCircle } from 'lucide-react'
|
|
import { useAuth } from '../lib/auth'
|
|
|
|
function Shell(){
|
|
const { logout } = useAuth()
|
|
const nav = useNavigate()
|
|
return (
|
|
<div className="min-h-screen bg-neutral-50 text-neutral-900">
|
|
<header className="sticky top-0 z-30 border-b bg-white/70 backdrop-blur">
|
|
<div className="mx-auto flex max-w-7xl items-center gap-3 px-4 py-3">
|
|
<Link to="/" className="flex items-center gap-2">
|
|
<div className="grid h-9 w-9 place-items-center rounded-xl bg-gradient-to-br from-amber-500 to-orange-600 text-white shadow">📚</div>
|
|
<div className="text-lg font-semibold tracking-tight">Bookoomoo</div>
|
|
</Link>
|
|
<div className="ml-auto hidden w-full max-w-md items-center gap-2 rounded-xl border bg-white px-3 py-2 shadow-sm md:flex">
|
|
<Search className="h-4 w-4 text-neutral-400" />
|
|
<input className="w-full bg-transparent text-sm outline-none placeholder:text-neutral-400" placeholder="Cari cerita, order, atau donasi…" />
|
|
</div>
|
|
<button onClick={()=>{ logout(); nav('/login') }} className="ml-2 inline-flex items-center gap-2 rounded-xl border px-3 py-2 text-sm hover:bg-neutral-50">
|
|
<LogOut className="h-4 w-4" /> Keluar
|
|
</button>
|
|
</div>
|
|
</header>
|
|
|
|
<nav className="mx-auto max-w-7xl px-4 pt-4">
|
|
<div className="flex flex-wrap gap-2">
|
|
<Link to="/" className="rounded-xl border bg-white px-3 py-1.5 text-sm hover:bg-neutral-50 inline-flex items-center gap-2"><Home className="h-4 w-4"/> Dashboard</Link>
|
|
<Link to="/create" className="rounded-xl border bg-white px-3 py-1.5 text-sm hover:bg-neutral-50 inline-flex items-center gap-2"><PlusCircle className="h-4 w-4"/> Buat Cerita</Link>
|
|
<Link to="/upload" className="rounded-xl border bg-white px-3 py-1.5 text-sm hover:bg-neutral-50 inline-flex items-center gap-2"><Upload className="h-4 w-4"/> Upload Foto</Link>
|
|
<Link to="/downloads" className="rounded-xl border bg-white px-3 py-1.5 text-sm hover:bg-neutral-50 inline-flex items-center gap-2"><Download className="h-4 w-4"/> Unduh PDF</Link>
|
|
<Link to="/print" className="rounded-xl border bg-white px-3 py-1.5 text-sm hover:bg-neutral-50 inline-flex items-center gap-2"><Printer className="h-4 w-4"/> Cetak Fisik</Link>
|
|
<Link to="/stories" className="rounded-xl border bg-white px-3 py-1.5 text-sm hover:bg-neutral-50 inline-flex items-center gap-2"><BookOpen className="h-4 w-4"/> Cerita</Link>
|
|
<Link to="/orders" className="rounded-xl border bg-white px-3 py-1.5 text-sm hover:bg-neutral-50 inline-flex items-center gap-2"><Printer className="h-4 w-4"/> Order</Link>
|
|
<Link to="/donations" className="rounded-xl border bg-white px-3 py-1.5 text-sm hover:bg-neutral-50 inline-flex items-center gap-2"><Gift className="h-4 w-4"/> Donasi</Link>
|
|
<Link to="/topup" className="rounded-xl border bg-white px-3 py-1.5 text-sm hover:bg-neutral-50 inline-flex items-center gap-2"><Wallet className="h-4 w-4"/> Top Up</Link>
|
|
</div>
|
|
</nav>
|
|
|
|
<main className="mx-auto max-w-7xl px-4 py-6">
|
|
<Outlet />
|
|
</main>
|
|
|
|
<footer className="mx-auto max-w-7xl px-4 py-10 text-center text-xs text-neutral-500">© {new Date().getFullYear()} Bookoomoo — Be Different, Be You.</footer>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default function Layout(){
|
|
return <Shell />
|
|
}
|
|
|