55 lines
1.5 KiB
TypeScript
55 lines
1.5 KiB
TypeScript
import { useNavigate } from "react-router";
|
|
import { useState } from "react";
|
|
|
|
export default function Dashboard() {
|
|
const navigate = useNavigate();
|
|
const [menu, setMenu] = useState("dashboard");
|
|
|
|
const menus = ["dashboard", "profile", "settings", "about"];
|
|
|
|
return (
|
|
<div className="flex min-h-screen bg-gray-900 text-white">
|
|
|
|
{/* SIDEBAR */}
|
|
<div className="w-52 bg-gray-800 p-4 flex flex-col justify-between">
|
|
<div>
|
|
<h1 className="text-xl font-bold mb-6">MyApp</h1>
|
|
|
|
{menus.map((item) => (
|
|
<div
|
|
key={item}
|
|
onClick={() => setMenu(item)}
|
|
className={`p-2 mb-2 rounded cursor-pointer capitalize ${
|
|
menu === item ? "bg-purple-600" : "hover:bg-gray-700"
|
|
}`}
|
|
>
|
|
{item}
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
<button
|
|
onClick={() => navigate("/login")}
|
|
className="bg-red-500 py-1 rounded"
|
|
>
|
|
Logout
|
|
</button>
|
|
</div>
|
|
|
|
{/* CONTENT */}
|
|
<div className="flex-1 flex items-center justify-center">
|
|
<div className="bg-gray-800 p-10 rounded-xl shadow-lg text-center w-[450px] h-[220px]">
|
|
|
|
<h1 className="text-2xl font-bold capitalize mb-3">
|
|
{menu}
|
|
</h1>
|
|
|
|
<p className="text-gray-400">
|
|
Selamat datang di halaman {menu} 👋
|
|
</p>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
} |