104 lines
3.8 KiB
JavaScript
104 lines
3.8 KiB
JavaScript
'use client';
|
|
import { useState, useEffect } from 'react';
|
|
import { useRouter } from 'next/navigation';
|
|
import Link from 'next/link';
|
|
import { motion } from 'framer-motion';
|
|
import { LogOut, ChevronRight, Settings } from 'lucide-react';
|
|
|
|
export default function Header({ title = 'داشبورد', showBack = false }) {
|
|
const [user, setUser] = useState(null);
|
|
const router = useRouter();
|
|
|
|
useEffect(() => {
|
|
const userData = localStorage.getItem('user');
|
|
if (userData) {
|
|
setUser(JSON.parse(userData));
|
|
} else {
|
|
router.push('/');
|
|
}
|
|
}, [router]);
|
|
|
|
const handleLogout = () => {
|
|
localStorage.removeItem('token');
|
|
localStorage.removeItem('user');
|
|
router.push('/');
|
|
};
|
|
|
|
const getInitial = (name) => {
|
|
if (!name) return 'U';
|
|
return name.charAt(0);
|
|
};
|
|
|
|
if (!showBack) {
|
|
// Style 4: Modern Floating Island (Pill) Design
|
|
return (
|
|
<motion.header
|
|
initial={{ y: -50, opacity: 0 }}
|
|
animate={{ y: 0, opacity: 1 }}
|
|
transition={{ type: 'spring', stiffness: 300, damping: 24 }}
|
|
className="mx-4 mt-6 mb-4 p-2 bg-white/70 backdrop-blur-xl border border-white rounded-[28px] flex items-center justify-between shadow-[0_8px_30px_rgb(0,0,0,0.04)]"
|
|
>
|
|
<Link href="/settings" className="flex items-center gap-3 hover:opacity-80 transition-opacity">
|
|
<div className="w-12 h-12 bg-gradient-to-tr from-purple-600 to-indigo-500 rounded-[20px] flex items-center justify-center text-white text-lg font-bold shadow-md shadow-purple-500/20 overflow-hidden">
|
|
{user?.avatarUrl ? (
|
|
<img src={user.avatarUrl} alt={user.name} className="w-full h-full object-cover" />
|
|
) : (
|
|
getInitial(user?.name)
|
|
)}
|
|
</div>
|
|
<div className="flex flex-col pr-1">
|
|
<span className="text-[10px] text-gray-400 font-extrabold tracking-wider mb-0.5">پردیس رایانه</span>
|
|
<span className="text-sm font-black text-gray-800 tracking-tight">
|
|
{user?.name || 'کاربر'}
|
|
</span>
|
|
</div>
|
|
</Link>
|
|
|
|
<div className="flex items-center gap-2 pl-1">
|
|
{user?.role === 'ADMIN' && (
|
|
<Link
|
|
href="/admin"
|
|
className="w-10 h-10 bg-gray-50 text-gray-600 rounded-[18px] hover:bg-gray-100 transition-colors flex items-center justify-center"
|
|
title="پنل مدیریت"
|
|
>
|
|
<Settings size={18} strokeWidth={2.5} />
|
|
</Link>
|
|
)}
|
|
<button
|
|
onClick={handleLogout}
|
|
className="w-10 h-10 bg-red-50 text-red-500 rounded-[18px] hover:bg-red-100 transition-colors flex items-center justify-center"
|
|
title="خروج"
|
|
>
|
|
<LogOut size={18} strokeWidth={2.5} />
|
|
</button>
|
|
</div>
|
|
</motion.header>
|
|
);
|
|
}
|
|
|
|
// Inner pages (showBack = true)
|
|
return (
|
|
<motion.header
|
|
initial={{ y: -20, opacity: 0 }}
|
|
animate={{ y: 0, opacity: 1 }}
|
|
className="sticky top-4 z-50 mx-4 mb-6 p-2 bg-white/80 backdrop-blur-xl border border-white rounded-[24px] flex items-center justify-between shadow-[0_8px_30px_rgb(0,0,0,0.06)]"
|
|
>
|
|
<button
|
|
onClick={() => router.back()}
|
|
className="w-10 h-10 bg-gray-50 text-gray-700 rounded-[18px] hover:bg-gray-100 transition-all flex items-center justify-center"
|
|
>
|
|
<ChevronRight size={20} strokeWidth={2.5} />
|
|
</button>
|
|
|
|
<div className="font-extrabold text-sm text-gray-800 absolute left-1/2 -translate-x-1/2">
|
|
{title}
|
|
</div>
|
|
|
|
<div className="w-10 h-10 flex items-center justify-center">
|
|
{/* Decorative dot for symmetry */}
|
|
<div className="w-1.5 h-1.5 rounded-full bg-gray-300"></div>
|
|
</div>
|
|
</motion.header>
|
|
);
|
|
}
|