starred/linsa
1
0
Fork 0
mirror of https://github.com/linsa-io/linsa.git synced 2026-01-11 20:00:23 +01:00
Code Issues 2 Packages Projects Releases Wiki Activity

Update ProfileSidebar to conditionally display avatar or live indicator

Browse Source 
- 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
1 changed files with 18 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
packages/web/src/components/ProfileSidebar.tsx
View File

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