karyamanswasta/karyaman-project
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore(bookoomoo): scaffold Vite + React + Tailwind app from skeleton with routing, layout, pages, auth, API wrapper

Browse Source
This commit is contained in:
karyamanswasta
2025-08-10 01:31:32 +07:00
parent 9aa4484129
commit a409cbd17b
23 changed files with 548 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

53
bookoomoo-app/src/components/Layout.jsx Normal file
View File

@@ -0,0 +1,53 @@
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 />
}