.

app/components/custom-ui/server-button.tsx

@@ -0,0 +1,36 @@
+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>
+    )
+}