109 lines
2.9 KiB
TypeScript
109 lines
2.9 KiB
TypeScript
// src/components/dashboard/Hero.tsx
|
|
|
|
import lang from "../../languages/language";
|
|
|
|
export default function Hero() {
|
|
return (
|
|
<div className="bg-blue-50 rounded-3xl p-8 shadow-sm border border-blue-100 mb-8">
|
|
|
|
{/* HEADER */}
|
|
<div className="flex justify-between items-start mb-8">
|
|
|
|
{/* LEFT */}
|
|
<div>
|
|
<p className="text-gray-500 text-lg">
|
|
{lang.welcome}
|
|
</p>
|
|
|
|
<h1 className="text-5xl font-extrabold text-blue-700 mt-2">
|
|
{lang.dashboard}
|
|
</h1>
|
|
</div>
|
|
|
|
{/* PROFILE */}
|
|
<div className="flex items-center gap-3 bg-white rounded-full px-4 py-2 shadow border hover:shadow-lg transition">
|
|
|
|
{/* AVATAR */}
|
|
<div className="w-12 h-12 bg-blue-600 rounded-full flex items-center justify-center text-white font-bold text-lg">
|
|
Y
|
|
</div>
|
|
|
|
{/* USER INFO */}
|
|
<div>
|
|
<h3 className="font-semibold text-black">
|
|
Yudha
|
|
</h3>
|
|
|
|
<p className="text-gray-500 text-sm">
|
|
{lang.users}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* STAT CARDS */}
|
|
<div className="grid grid-cols-4 gap-6">
|
|
|
|
{/* CARD 1 */}
|
|
<div className="bg-white rounded-2xl p-6 shadow border hover:shadow-lg transition">
|
|
<p className="text-gray-500 mb-2">
|
|
{lang.todayRequest}
|
|
</p>
|
|
|
|
<h2 className="text-4xl font-bold text-blue-700">
|
|
27
|
|
</h2>
|
|
|
|
<p className="text-green-600 mt-2">
|
|
{lang.fromYesterday}
|
|
</p>
|
|
</div>
|
|
|
|
{/* CARD 2 */}
|
|
<div className="bg-white rounded-2xl p-6 shadow border hover:shadow-lg transition">
|
|
<p className="text-gray-500 mb-2">
|
|
{lang.waitingApproval}
|
|
</p>
|
|
|
|
<h2 className="text-4xl font-bold text-blue-700">
|
|
5
|
|
</h2>
|
|
|
|
<p className="text-yellow-600 mt-2">
|
|
{lang.needAction}
|
|
</p>
|
|
</div>
|
|
|
|
{/* CARD 3 */}
|
|
<div className="bg-white rounded-2xl p-6 shadow border hover:shadow-lg transition">
|
|
<p className="text-gray-500 mb-2">
|
|
{lang.totalItems}
|
|
</p>
|
|
|
|
<h2 className="text-4xl font-bold text-blue-700">
|
|
48
|
|
</h2>
|
|
|
|
<p className="text-green-600 mt-2">
|
|
{lang.lowStock}
|
|
</p>
|
|
</div>
|
|
|
|
{/* CARD 4 */}
|
|
<div className="bg-white rounded-2xl p-6 shadow border hover:shadow-lg transition">
|
|
<p className="text-gray-500 mb-2">
|
|
{lang.users}
|
|
</p>
|
|
|
|
<h2 className="text-4xl font-bold text-blue-700">
|
|
214
|
|
</h2>
|
|
|
|
<p className="text-green-600 mt-2">
|
|
{lang.studentsStaff}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
} |