feat: implement admin dashboard layout and update authentication flow
This commit is contained in:
parent
8b1af335ec
commit
23ac20c017
14
app/layouts/admin/dashboard.tsx
Normal file
14
app/layouts/admin/dashboard.tsx
Normal file
@ -0,0 +1,14 @@
|
|||||||
|
import type { PropsWithChildren } from 'react'
|
||||||
|
|
||||||
|
export const AdminDashboardLayout = (properties: PropsWithChildren) => {
|
||||||
|
const { children } = properties
|
||||||
|
return (
|
||||||
|
<div className="grid">
|
||||||
|
<div>Navbar</div>
|
||||||
|
<div className="flex">
|
||||||
|
<div>Sidebar</div>
|
||||||
|
<div>{children}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
@ -12,11 +12,13 @@ const AuthLayout = () => {
|
|||||||
<div className="flex min-h-dvh min-w-dvw flex-col items-center justify-center space-y-8">
|
<div className="flex min-h-dvh min-w-dvw flex-col items-center justify-center space-y-8">
|
||||||
<div className="grid max-w-lg items-center justify-center space-y-7 rounded-[20px] border border-[#E6E6E6] bg-white p-8">
|
<div className="grid max-w-lg items-center justify-center space-y-7 rounded-[20px] border border-[#E6E6E6] bg-white p-8">
|
||||||
<div className="flex flex-col items-center">
|
<div className="flex flex-col items-center">
|
||||||
<img
|
<Link to="/admin/dashboard">
|
||||||
src={APP.logo}
|
<img
|
||||||
alt={APP.title}
|
src={APP.logo}
|
||||||
className="h-[80px]"
|
alt={APP.title}
|
||||||
/>
|
className="h-[80px]"
|
||||||
|
/>
|
||||||
|
</Link>
|
||||||
</div>
|
</div>
|
||||||
<p className="text-center">
|
<p className="text-center">
|
||||||
Selamat Datang, silakan masukkan akun Anda untuk melanjutkan!
|
Selamat Datang, silakan masukkan akun Anda untuk melanjutkan!
|
||||||
|
|||||||
10
app/routes/_layout.admin.dashboard._index.tsx
Normal file
10
app/routes/_layout.admin.dashboard._index.tsx
Normal file
@ -0,0 +1,10 @@
|
|||||||
|
const DashboardIndexLayout = () => {
|
||||||
|
return (
|
||||||
|
<div className="relative">
|
||||||
|
<div className="flex min-h-screen items-center justify-center bg-gray-100">
|
||||||
|
Dashboard Page
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
export default DashboardIndexLayout
|
||||||
@ -1,10 +1,12 @@
|
|||||||
|
import { Outlet } from 'react-router'
|
||||||
|
|
||||||
|
import { AdminDashboardLayout } from '~/layouts/admin/dashboard'
|
||||||
|
|
||||||
const DashboardLayout = () => {
|
const DashboardLayout = () => {
|
||||||
return (
|
return (
|
||||||
<div className="relative">
|
<AdminDashboardLayout>
|
||||||
<div className="flex min-h-screen items-center justify-center bg-gray-100">
|
<Outlet />
|
||||||
Login form
|
</AdminDashboardLayout>
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
export default DashboardLayout
|
export default DashboardLayout
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user