80 lines
1.9 KiB
TypeScript
80 lines
1.9 KiB
TypeScript
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
interface User {
|
|
name: string;
|
|
avatar?: string;
|
|
role?: string;
|
|
status?: "online" | "offline" | "away" | "busy";
|
|
}
|
|
|
|
interface UserProfile4Props {
|
|
user?: User;
|
|
className?: string;
|
|
showStatus?: boolean;
|
|
}
|
|
|
|
const statusColors = {
|
|
online: "bg-emerald-500",
|
|
offline: "bg-muted-foreground",
|
|
away: "bg-amber-500",
|
|
busy: "bg-red-500",
|
|
};
|
|
|
|
const UserProfile4 = ({
|
|
user = {
|
|
name: "الهام میرزایی",
|
|
avatar:
|
|
"/block-media/shadcnblocks/block/avatar/avatar8.jpg",
|
|
role: "طراح محصول",
|
|
status: "online",
|
|
},
|
|
className,
|
|
showStatus = true,
|
|
}: UserProfile4Props) => {
|
|
const initials = user.name
|
|
.split(" ")
|
|
.map((n) => n[0])
|
|
.join("");
|
|
|
|
return (
|
|
<div
|
|
dir="rtl"
|
|
lang="fa"
|
|
className={cn(
|
|
"inline-flex max-w-xs items-center gap-3 rounded-full border bg-card py-1.5 ps-1.5 pe-4 shadow-sm",
|
|
className,
|
|
)}
|
|
>
|
|
<div className="relative">
|
|
<Avatar className="size-8">
|
|
<AvatarImage
|
|
src={user.avatar}
|
|
alt={user.name}
|
|
className="object-cover"
|
|
/>
|
|
<AvatarFallback className="text-xs font-medium">
|
|
{initials}
|
|
</AvatarFallback>
|
|
</Avatar>
|
|
{showStatus && user.status && (
|
|
<span
|
|
className={cn(
|
|
"absolute -bottom-0.5 -end-0.5 size-3 rounded-full border-2 border-card",
|
|
statusColors[user.status],
|
|
)}
|
|
/>
|
|
)}
|
|
</div>
|
|
<div className="flex flex-col">
|
|
<span className="text-sm leading-tight font-medium">{user.name}</span>
|
|
{user.role && (
|
|
<span className="text-xs text-muted-foreground">{user.role}</span>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export { UserProfile4 };
|