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