30 lines
879 B
JavaScript
30 lines
879 B
JavaScript
/**
|
|
* @file UserBadge.tsx
|
|
* @description Component rendering a user avatar badge with name and online status indicator.
|
|
*/
|
|
|
|
import Image from "next/image";
|
|
|
|
/**
|
|
* Renders a user profile badge including an avatar image, name, and current status.
|
|
*
|
|
* @returns {JSX.Element} The rendered user badge component.
|
|
*/
|
|
export default function UserBadge() {
|
|
return (
|
|
<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-foreground-muted text-xs">Online</p>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|