Update ProfileSidebar to conditionally display avatar or live indicator

- Remove default avatar URL fallback
- Show user image if available
- Display animated red dot when user image is absent and user is live
This commit is contained in:
Nikita
2025-12-25 08:21:40 -08:00
parent 271840ba34
commit c964660eda

View File

@@ -18,7 +18,6 @@ interface ProfileSidebarProps {
export function ProfileSidebar({ user, isLive, viewerCount, children }: ProfileSidebarProps) {
const displayName = user.name || user.username
const avatarUrl = user.image || `https://api.dicebear.com/7.x/initials/svg?seed=${user.username}`
return (
<div className="h-full flex flex-col bg-black border-l border-white/10">
@@ -26,18 +25,24 @@ export function ProfileSidebar({ user, isLive, viewerCount, children }: ProfileS
<div className="p-4 border-b border-white/10">
{/* Avatar and Live Badge */}
<div className="flex items-start gap-3">
<div className="relative">
<img
src={avatarUrl}
alt={displayName}
className="w-16 h-16 rounded-full bg-white/10"
/>
{isLive && (
<span className="absolute -bottom-1 -right-1 px-1.5 py-0.5 text-[10px] font-bold uppercase bg-red-500 text-white rounded">
Live
</span>
)}
</div>
{user.image ? (
<div className="relative">
<img
src={user.image}
alt={displayName}
className="w-16 h-16 rounded-full bg-white/10"
/>
{isLive && (
<span className="absolute -bottom-1 -right-1 px-1.5 py-0.5 text-[10px] font-bold uppercase bg-red-500 text-white rounded">
Live
</span>
)}
</div>
) : isLive ? (
<div className="relative">
<div className="w-3 h-3 rounded-full bg-red-500 animate-pulse" />
</div>
) : null}
<div className="flex-1 min-w-0">
<h2 className="text-lg font-bold text-white truncate">{displayName}</h2>
<p className="text-sm text-white/60">@{user.username}</p>