86 lines
3.9 KiB
TypeScript
86 lines
3.9 KiB
TypeScript
import { useEffect, useState } from 'react';
|
|
import { useAuthStore, type PublicProfile } from '../stores/auth.ts';
|
|
|
|
interface UserProfileModalProps {
|
|
userId: string;
|
|
onClose: () => void;
|
|
}
|
|
|
|
export function UserProfileModal({ userId, onClose }: UserProfileModalProps) {
|
|
const getPublicProfile = useAuthStore((s) => s.getPublicProfile);
|
|
const blockUser = useAuthStore((s) => s.blockUser);
|
|
const [profile, setProfile] = useState<PublicProfile | null>(null);
|
|
const [error, setError] = useState<string | null>(null);
|
|
|
|
useEffect(() => {
|
|
getPublicProfile(userId).then(setProfile).catch(setError);
|
|
}, [userId, getPublicProfile]);
|
|
|
|
const statusColor = {
|
|
online: 'bg-gb-green',
|
|
idle: 'bg-gb-orange',
|
|
dnd: 'bg-gb-red',
|
|
offline: 'bg-gb-fg-t',
|
|
}[profile?.status || 'offline'];
|
|
|
|
return (
|
|
<div className="fixed inset-0 z-50 flex items-center justify-center bg-gb-bg/90 p-4" onClick={onClose}>
|
|
<div className="bg-gb-bg border border-gb-fg-t w-full max-w-md max-h-[90vh] overflow-y-auto" onClick={(e) => e.stopPropagation()}>
|
|
{error && <div className="p-3 text-gb-red text-xs">ERR: {error}</div>}
|
|
{!profile && !error && <div className="p-6 text-gb-fg-f text-center text-xs">[loading...]</div>}
|
|
{profile && (
|
|
<>
|
|
<div
|
|
className="h-24 bg-cover bg-center border-b border-gb-bg-t"
|
|
style={{ backgroundImage: profile.banner_url ? `url(${profile.banner_url})` : undefined, backgroundColor: profile.accent_color || '#2D3436' }}
|
|
/>
|
|
<div className="p-4">
|
|
<div className="flex items-start gap-3 -mt-12 mb-3">
|
|
<img src={profile.avatar} alt="" className="w-20 h-20 border-2 border-gb-bg bg-gb-bg object-cover" />
|
|
<div className="mt-12">
|
|
<div className="flex items-center gap-2">
|
|
<span className={`w-2 h-2 rounded-full ${statusColor}`} />
|
|
<span className="text-gb-fg font-bold">{profile.display_name || profile.username}</span>
|
|
</div>
|
|
<div className="text-gb-fg-s text-xs">@{profile.username}</div>
|
|
{profile.pronouns && <div className="text-gb-fg-t text-[10px]">{profile.pronouns}</div>}
|
|
</div>
|
|
</div>
|
|
{profile.tagline && <div className="text-gb-fg text-sm mb-2 italic">"{profile.tagline}"</div>}
|
|
{profile.bio && <div className="text-gb-fg-s text-xs mb-3 whitespace-pre-wrap">{profile.bio}</div>}
|
|
{profile.social_links && profile.social_links.length > 0 && (
|
|
<div className="mb-3 space-y-1">
|
|
{profile.social_links.map((link, idx) => (
|
|
<a key={idx} href={link.url} target="_blank" rel="noreferrer" className="text-gb-aqua text-xs block hover:underline">
|
|
{link.platform}
|
|
</a>
|
|
))}
|
|
</div>
|
|
)}
|
|
{profile.badges && profile.badges.length > 0 && (
|
|
<div className="flex flex-wrap gap-1 mb-3">
|
|
{profile.badges.map((badge) => (
|
|
<span key={badge.id} className="text-[10px] px-1.5 py-0.5 border border-gb-bg-t text-gb-fg-s" title={badge.description}>
|
|
{badge.icon && <span className="mr-1">{badge.icon}</span>}
|
|
{badge.name}
|
|
</span>
|
|
))}
|
|
</div>
|
|
)}
|
|
<div className="flex justify-end gap-2">
|
|
<button onClick={onClose} className="text-xs text-gb-fg-f hover:text-gb-orange font-mono">[CLOSE]</button>
|
|
<button
|
|
onClick={() => blockUser(userId).then(onClose)}
|
|
className="text-xs text-gb-red hover:text-gb-orange font-mono"
|
|
>
|
|
[BLOCK]
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|