62 lines
1.9 KiB
TypeScript
62 lines
1.9 KiB
TypeScript
import React from 'react';
|
|
import { useSelector } from 'react-redux';
|
|
import { Link, useParams } from 'react-router-dom';
|
|
import { FaCog } from 'react-icons/fa';
|
|
import { IoIosNotifications } from 'react-icons/io';
|
|
import { RootState } from '../../store/store';
|
|
import { UserState } from '../../store/slices/userSlice';
|
|
|
|
const HomeTopNav = () => {
|
|
const user: UserState = useSelector((state: RootState) => state.user);
|
|
|
|
const initials = user.username
|
|
? user.username
|
|
.split(' ')
|
|
.map((n) => n[0])
|
|
.join('')
|
|
.slice(0, 2)
|
|
.toUpperCase()
|
|
: 'U';
|
|
|
|
return (
|
|
<header className="w-full px-6 py-2 flex justify-between items-center bg-white border-b rounded-sm border-gray-200">
|
|
<h1 className="text-md font-medium text-gray-800 capitalize">Home</h1>
|
|
|
|
<div className="flex items-center">
|
|
{/* Notification + Settings with smaller gap */}
|
|
<div className="flex items-center">
|
|
<button
|
|
aria-label="Notifications"
|
|
className="p-2 rounded-full hover:bg-gray-100 transition-colors text-gray-600"
|
|
>
|
|
<IoIosNotifications className="text-xl" />
|
|
</button>
|
|
|
|
<Link
|
|
to="settings"
|
|
aria-label="Settings"
|
|
className="p-2 rounded-full hover:bg-gray-100 transition-colors text-gray-600"
|
|
>
|
|
<FaCog className="text-sm" />
|
|
</Link>
|
|
</div>
|
|
|
|
{/* Avatar with separate spacing */}
|
|
<div className="w-9 h-9 ms-3 rounded-full overflow-hidden bg-[var(--primary)] flex items-center justify-center text-white font-semibold text-sm">
|
|
{user.picture ? (
|
|
<img
|
|
src={user.picture}
|
|
alt="User avatar"
|
|
className="w-full h-full object-cover"
|
|
/>
|
|
) : (
|
|
initials
|
|
)}
|
|
</div>
|
|
</div>
|
|
</header>
|
|
);
|
|
};
|
|
|
|
export default HomeTopNav;
|