39 lines
1.6 KiB
TypeScript
39 lines
1.6 KiB
TypeScript
import { Avatar, AvatarFallback, AvatarImage } from "@radix-ui/react-avatar";
|
|
import { NavLink } from "react-router";
|
|
import type { Server } from "~/lib/api/types";
|
|
import { cn, getFirstLetters } from "~/lib/utils";
|
|
import { Button } from "../ui/button";
|
|
import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/tooltip";
|
|
|
|
export interface ServerButtonProps {
|
|
server: Server;
|
|
}
|
|
|
|
export function ServerButton({ server }: ServerButtonProps) {
|
|
return (
|
|
<NavLink to={`/app/server/${server.id}`}>
|
|
{({ isActive }) => (
|
|
<Tooltip disableHoverableContent>
|
|
<TooltipTrigger asChild>
|
|
<Button
|
|
variant="outline"
|
|
size="none"
|
|
className={cn("overflow-hidden", isActive ? "bg-accent" : "")}
|
|
>
|
|
<div className="flex items-center justify-center size-12">
|
|
<Avatar className="rounded-none">
|
|
<AvatarImage src={server.iconUrl} className="rounded-none" />
|
|
<AvatarFallback>{getFirstLetters(server.name, 4)}</AvatarFallback>
|
|
</Avatar>
|
|
</div>
|
|
</Button>
|
|
</TooltipTrigger>
|
|
<TooltipContent side="right">
|
|
<p className="text-xs">{server.name}</p>
|
|
</TooltipContent>
|
|
</Tooltip>
|
|
)}
|
|
</NavLink>
|
|
);
|
|
}
|