Tola Leng
78 lines
2.5 KiB
TypeScript
78 lines
2.5 KiB
TypeScript
|
|
import { User } from "@/services/userService";
|
|
import { Avatar, AvatarImage, AvatarFallback } from "@/components/ui/avatar";
|
|
import { Badge } from "@/components/ui/badge";
|
|
import { Mail, User as UserIcon } from "lucide-react";
|
|
|
|
interface UserProfileDetailsProps {
|
|
user: User;
|
|
}
|
|
|
|
export function UserProfileDetails({ user }: UserProfileDetailsProps) {
|
|
// Format dates
|
|
const createdDate = new Date(user.created).toLocaleDateString();
|
|
|
|
// Get avatar or initials
|
|
const getInitials = () => {
|
|
if (user.full_name) {
|
|
return user.full_name.split(' ')
|
|
.map(name => name[0])
|
|
.join('')
|
|
.toUpperCase();
|
|
}
|
|
return user.username[0].toUpperCase();
|
|
};
|
|
|
|
// Determine if the user is active based on the status field
|
|
const isActive = user.status === "Active";
|
|
|
|
return (
|
|
<div className="flex flex-col items-center space-y-4">
|
|
<Avatar className="h-32 w-32">
|
|
{user.avatar ? (
|
|
<AvatarImage src={user.avatar} alt={user.full_name || user.username} />
|
|
) : (
|
|
<AvatarFallback className="text-3xl bg-primary/20 text-primary">
|
|
{getInitials()}
|
|
</AvatarFallback>
|
|
)}
|
|
</Avatar>
|
|
|
|
<div className="space-y-1 text-center">
|
|
<h2 className="text-xl font-bold">{user.full_name || user.username}</h2>
|
|
<div className="flex items-center justify-center text-sm text-muted-foreground gap-1">
|
|
<Mail className="h-3 w-3" />
|
|
<span>{user.email}</span>
|
|
</div>
|
|
<div className="flex items-center justify-center text-sm text-muted-foreground gap-1">
|
|
<UserIcon className="h-3 w-3" />
|
|
<span>@{user.username}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="w-full pt-2">
|
|
<div className="flex flex-wrap justify-center gap-2 pt-2">
|
|
{user.role && (
|
|
<Badge variant="secondary" className="px-2 py-1">
|
|
{user.role}
|
|
</Badge>
|
|
)}
|
|
<Badge variant={isActive ? "default" : "outline"} className="px-2 py-1">
|
|
{user.status || (isActive ? "Active" : "Inactive")}
|
|
</Badge>
|
|
{user.verified && (
|
|
<Badge className="bg-green-600 hover:bg-green-700 px-2 py-1">
|
|
Verified
|
|
</Badge>
|
|
)}
|
|
</div>
|
|
|
|
<div className="border-t border-border mt-4 pt-4">
|
|
<p className="text-sm text-muted-foreground">
|
|
Member since: {createdDate}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
} |