1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
|
import {
CloudArrowUpIcon,
Cog6ToothIcon,
HomeIcon,
UserIcon,
} from "@heroicons/react/24/outline";
import Link from "next/link";
import { useRouter } from "next/router";
import React from "react";
const Navigation = [
{
name: "Dashboard",
page: 1,
icon: <HomeIcon />,
current: false,
},
{
name: "Metadata",
page: 2,
icon: <CloudArrowUpIcon />,
current: false,
},
{
name: "Users",
page: 3,
icon: <UserIcon />,
current: false,
},
{
name: "Settings",
page: 4,
icon: <Cog6ToothIcon />,
current: false,
},
];
export default function AdminLayout({ children, page, setPage }) {
return (
<div className="relative w-screen h-screen">
<div className="absolute flex flex-col gap-5 top-0 left-0 py-2 bg-secondary w-[14rem] h-full">
<div className="flex flex-col px-3">
<p className="text-sm font-light text-action font-outfit">moopa</p>
<h1 className="text-2xl font-bold text-white">
Admin <br />
Dashboard
</h1>
</div>
<div className="flex flex-col px-1">
{Navigation.map((item, index) => (
<button
key={item.name}
onClick={() => {
setPage(item.page);
}}
className={`flex items-center gap-2 p-2 group ${
page == item.page ? "bg-image/50" : "text-txt"
} hover:bg-image rounded transition-colors duration-200 ease-in-out`}
>
<div
className={`w-5 h-5 ${
page == item.page ? "text-action" : "text-txt"
} group-hover:text-action`}
>
{item.icon}
</div>
<p>{item.name}</p>
</button>
))}
</div>
</div>
<div className="ml-[14rem] overflow-x-hidden h-full">{children}</div>
</div>
);
}
|