flowstate/app/components/layout/Header.tsx

28 lines
937 B
TypeScript

import Brand from "./Brand";
import Image from "next/image";
export default function Header() {
return (
<header className="h-20 border-b border-border backdrop-blur-md p-4 flex items-center md:justify-end justify-between sticky top-0 z-50">
{/* Brand Element */}
<div className="md:hidden flex items-center gap-3">
<Brand />
</div>
{/* User Profil */}
<div className="flex items-center gap-3">
<div className="w-12 h-12 rounded-full relative overflow-hidden border border-border">
<Image
src="https://randomuser.me/api/portraits/women/1.jpg"
alt="User Avatar"
fill
className="object-cover"
/>
</div>
<div className="hidden sm:block text-left">
<p className="text-sm">Charlotte W.</p>
<p className=" text-muted text-xs">Online</p>
</div>
</div>
</header>
);
}