mirror of
https://github.com/linsa-io/linsa.git
synced 2026-01-11 11:50:25 +01:00
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:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user