Updated guild page

src/app/(stats)/guild/[value]/_components/sidebar.tsx

@@ -0,0 +1,48 @@
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
+import { Separator } from "@/components/ui/separator"
+import { getColor } from "@/lib/colors"
+import { Guild } from "@/lib/schema/guild"
+import { cn } from "@/lib/utils"
+import Link from "next/link"
+
+type SidebarProps = { guild: Guild["guild"] }
+
+export default function Sidebar({ guild }: SidebarProps) {
+    const tagColor = getColor(guild.tagColor, "text", "gray")
+
+    return (
+        <Card className="mx-auto w-full lg:mx-0 lg:w-1/4 max-w-120 md:max-w-3/10">
+            <CardHeader className="flex justify-center">
+                <CardTitle className={cn("text-4xl", guild.tag && tagColor)}>
+                    {guild.tag !== undefined ? `[${guild.tag}]` : "No Guild Tag"}
+                </CardTitle>
+            </CardHeader>
+            <CardContent>
+                {guild.description !== undefined ?
+                    <ReplaceLinks text={guild.description} /> :
+                    <p>No guild description.</p>}
+                <Separator className="my-4" />
+            </CardContent>
+        </Card>
+    )
+}
+
+function ReplaceLinks({ text }: { text: string }) {
+    const regex = /(https?:\/\/[^\s/$.?#].[^\s]*)/g
+    const parts = text.split(regex)
+
+    return (
+        <div>
+            {parts.map((part, index) => {
+                if (regex.test(part)) {
+                    return (
+                        <Link key={index} href={part} target="_blank">
+                            {part}
+                        </Link>
+                    )
+                }
+                return part
+            })}
+        </div>
+    )
+}