44 lines
1.7 KiB
TypeScript
44 lines
1.7 KiB
TypeScript
import { Check } from "lucide-react"
|
|
import { NavLink } from "react-router"
|
|
import type { RecipientChannel } from "~/lib/api/types"
|
|
import { cn } from "~/lib/utils"
|
|
import { useUserStore } from "~/store/user"
|
|
import { OnlineStatus } from "./online-status"
|
|
import { Avatar, AvatarImage } from "./ui/avatar"
|
|
import { Badge } from "./ui/badge"
|
|
|
|
interface PrivateChannelListItemProps {
|
|
channel: RecipientChannel
|
|
}
|
|
|
|
export default function PrivateChannelListItem({ channel }: PrivateChannelListItemProps) {
|
|
const userId = useUserStore(state => state.user?.id)
|
|
const recipients = channel.recipients.filter(recipient => recipient.id !== userId);
|
|
const renderSystemBadge = recipients.some(recipient => recipient.system) && recipients.length === 1
|
|
|
|
return (
|
|
<>
|
|
<NavLink to={`/app/@me/channels/${channel.id}`} className={({ isActive }) =>
|
|
cn(
|
|
"rounded-xl justify-start",
|
|
isActive ? "bg-primary/20" : "bg-accent",
|
|
)
|
|
}>
|
|
<div className="flex items-center gap-2 max-w-72 p-2">
|
|
<div>
|
|
<OnlineStatus status="online">
|
|
<Avatar>
|
|
<AvatarImage src={`https://api.dicebear.com/9.x/bottts/jpg?seed=${channel.name}`} />
|
|
</Avatar>
|
|
</OnlineStatus>
|
|
</div>
|
|
<div className="truncate">
|
|
{recipients.map(recipient => recipient.displayName || recipient.username).join(", ")}
|
|
</div>
|
|
{renderSystemBadge && <Badge variant="default"> <Check /> System</Badge>}
|
|
</div>
|
|
</NavLink>
|
|
</>
|
|
)
|
|
}
|