102 lines
3.1 KiB
TypeScript
102 lines
3.1 KiB
TypeScript
import { useNavigate } from "react-router";
|
|
import { useState } from "react";
|
|
|
|
export default function Dashboard() {
|
|
const navigate = useNavigate();
|
|
const [activeMenu, setActiveMenu] = useState("dashboard");
|
|
|
|
const handleLogout = () => {
|
|
navigate("/login");
|
|
};
|
|
|
|
return (
|
|
<div className="min-h-screen bg-gradient-to-br from-pink-100 via-white to-pink-200 flex">
|
|
|
|
{/* SIDEBAR */}
|
|
<div className="w-72 bg-white shadow-2xl p-6 flex flex-col justify-between rounded-r-3xl">
|
|
|
|
<div>
|
|
<h1 className="text-4xl font-bold text-pink-500 mb-10">
|
|
MyApp
|
|
</h1>
|
|
|
|
<div className="space-y-4">
|
|
|
|
{["dashboard", "profile", "settings"].map((menu) => (
|
|
<div
|
|
key={menu}
|
|
onClick={() => setActiveMenu(menu)}
|
|
className={`p-4 rounded-2xl cursor-pointer capitalize font-semibold transition-all duration-300 ${
|
|
activeMenu === menu
|
|
? "bg-pink-500 text-white shadow-lg scale-105"
|
|
: "hover:bg-pink-100 text-gray-700"
|
|
}`}
|
|
>
|
|
{menu}
|
|
</div>
|
|
))}
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<button
|
|
onClick={handleLogout}
|
|
className="bg-pink-500 text-white py-3 rounded-2xl font-bold hover:bg-pink-700 transition"
|
|
>
|
|
Logout
|
|
</button>
|
|
</div>
|
|
|
|
{/* CONTENT */}
|
|
<div className="flex-1 p-10">
|
|
|
|
{/* TOPBAR */}
|
|
<div className="bg-white rounded-3xl shadow-lg p-6 flex justify-between items-center mb-8">
|
|
<div>
|
|
<h1 className="text-3xl font-bold text-pink-500 capitalize">
|
|
{activeMenu}
|
|
</h1>
|
|
<p className="text-gray-500">
|
|
Selamat datang kembali 👋
|
|
</p>
|
|
</div>
|
|
|
|
<div className="w-14 h-14 rounded-full bg-pink-500 flex items-center justify-center text-white font-bold text-xl">
|
|
N
|
|
</div>
|
|
</div>
|
|
|
|
{/* CARD */}
|
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
|
|
|
|
<div className="bg-white rounded-3xl p-6 shadow-lg hover:-translate-y-2 transition">
|
|
<h2 className="text-gray-500 mb-2">Users</h2>
|
|
<p className="text-4xl font-bold text-pink-500">1,250</p>
|
|
</div>
|
|
|
|
<div className="bg-white rounded-3xl p-6 shadow-lg hover:-translate-y-2 transition">
|
|
<h2 className="text-gray-500 mb-2">Orders</h2>
|
|
<p className="text-4xl font-bold text-pink-400">530</p>
|
|
</div>
|
|
|
|
<div className="bg-white rounded-3xl p-6 shadow-lg hover:-translate-y-2 transition">
|
|
<h2 className="text-gray-500 mb-2">Income</h2>
|
|
<p className="text-4xl font-bold text-pink-600">$12,000</p>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
{/* BOTTOM SECTION */}
|
|
<div className="mt-8 bg-white rounded-3xl shadow-lg p-8">
|
|
<h2 className="text-2xl font-bold text-pink-500 mb-4">
|
|
Activity
|
|
</h2>
|
|
<p className="text-gray-500">
|
|
Tidak ada aktivitas terbaru saat ini.
|
|
</p>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
);
|
|
} |