143 lines
4.3 KiB
TypeScript
143 lines
4.3 KiB
TypeScript
import { lazy, Suspense } from "react"
|
|
import { BrowserRouter, Routes, Route } from "react-router-dom"
|
|
import { SiteProvider } from "@/context/SiteContext"
|
|
import { AuthProvider, useAuth } from "@/context/AuthContext"
|
|
import { Toaster } from "@/components/ui/sonner"
|
|
import MainLayout from "@/layouts/MainLayout"
|
|
import LandingPage from "@/pages/LandingPage"
|
|
import AdminLogin from "@/pages/AdminLogin"
|
|
|
|
// Lazy-load admin routes — tidak perlu di-load visitor landing page
|
|
const AdminLayout = lazy(() => import("@/layouts/AdminLayout"))
|
|
const AdminDashboard = lazy(() => import("@/pages/AdminDashboard"))
|
|
const HeroForm = lazy(() => import("@/pages/HeroForm"))
|
|
const PackageManager = lazy(() => import("@/pages/PackageForm"))
|
|
const BenefitsForm = lazy(() => import("@/pages/BenefitsForm"))
|
|
const AboutForm = lazy(() => import("@/pages/AboutForm"))
|
|
const ContactForm = lazy(() => import("@/pages/ContactForm"))
|
|
const SocialForm = lazy(() => import("@/pages/SocialForm"))
|
|
const GalleryForm = lazy(() => import("@/pages/GalleryForm"))
|
|
const PromoForm = lazy(() => import("@/pages/PromoForm"))
|
|
const UserManager = lazy(() => import("@/pages/UserManager"))
|
|
|
|
function AdminFallback() {
|
|
return (
|
|
<div className="flex items-center justify-center min-h-screen bg-gray-100">
|
|
<div className="text-center">
|
|
<div className="inline-block animate-spin rounded-full h-8 w-8 border-4 border-black border-t-yellow-300" />
|
|
<p className="mt-4 font-bold text-gray-600">Memuat panel admin...</p>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
function AdminGate() {
|
|
const { user, loading } = useAuth()
|
|
if (loading) return <AdminFallback />
|
|
if (!user) return <AdminLogin />
|
|
return (
|
|
<Suspense fallback={<AdminFallback />}>
|
|
<AdminLayout />
|
|
</Suspense>
|
|
)
|
|
}
|
|
|
|
export default function App() {
|
|
return (
|
|
<BrowserRouter>
|
|
<AuthProvider>
|
|
<SiteProvider>
|
|
<Routes>
|
|
<Route element={<MainLayout />}>
|
|
<Route path="/" element={<LandingPage />} />
|
|
</Route>
|
|
<Route path="/admin" element={<AdminGate />}>
|
|
<Route
|
|
index
|
|
element={
|
|
<Suspense fallback={<AdminFallback />}>
|
|
<AdminDashboard />
|
|
</Suspense>
|
|
}
|
|
/>
|
|
<Route
|
|
path="hero"
|
|
element={
|
|
<Suspense fallback={<AdminFallback />}>
|
|
<HeroForm />
|
|
</Suspense>
|
|
}
|
|
/>
|
|
<Route
|
|
path="packages"
|
|
element={
|
|
<Suspense fallback={<AdminFallback />}>
|
|
<PackageManager />
|
|
</Suspense>
|
|
}
|
|
/>
|
|
<Route
|
|
path="benefits"
|
|
element={
|
|
<Suspense fallback={<AdminFallback />}>
|
|
<BenefitsForm />
|
|
</Suspense>
|
|
}
|
|
/>
|
|
<Route
|
|
path="about"
|
|
element={
|
|
<Suspense fallback={<AdminFallback />}>
|
|
<AboutForm />
|
|
</Suspense>
|
|
}
|
|
/>
|
|
<Route
|
|
path="contact"
|
|
element={
|
|
<Suspense fallback={<AdminFallback />}>
|
|
<ContactForm />
|
|
</Suspense>
|
|
}
|
|
/>
|
|
<Route
|
|
path="social"
|
|
element={
|
|
<Suspense fallback={<AdminFallback />}>
|
|
<SocialForm />
|
|
</Suspense>
|
|
}
|
|
/>
|
|
<Route
|
|
path="gallery"
|
|
element={
|
|
<Suspense fallback={<AdminFallback />}>
|
|
<GalleryForm />
|
|
</Suspense>
|
|
}
|
|
/>
|
|
<Route
|
|
path="promo"
|
|
element={
|
|
<Suspense fallback={<AdminFallback />}>
|
|
<PromoForm />
|
|
</Suspense>
|
|
}
|
|
/>
|
|
<Route
|
|
path="users"
|
|
element={
|
|
<Suspense fallback={<AdminFallback />}>
|
|
<UserManager />
|
|
</Suspense>
|
|
}
|
|
/>
|
|
</Route>
|
|
</Routes>
|
|
<Toaster />
|
|
</SiteProvider>
|
|
</AuthProvider>
|
|
</BrowserRouter>
|
|
)
|
|
}
|