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>
+    )
+}

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

@@ -8,6 +8,7 @@ import { Loader2Icon, ShieldAlert } from "lucide-react"
 import { Suspense } from "react"
 import z from "zod"
 import { GuildPageLoadText } from "./_client"
+import Sidebar from "./_components/sidebar"
 
 export default function GuildPage({ params, searchParams }: PageProps<"/guild/[value]">) {
     const maintenance = env.MAINTENANCE_MODE
@@ -100,6 +101,12 @@ async function SuspendedPage({ params, searchParams }: Pick<PageProps<"/guild/[v
                     <span className={cn(getColor(guild.tagColor, "text", "gray"))}>{guild.name}</span>
                 </h1>
             </div>
+            <div className="flex flex-col gap-6 px-6 pb-4 mt-8 w-full max-w-7xl md:flex-row">
+                <Sidebar guild={guild} />
+                <div className="mx-auto w-full lg:mx-0 lg:w-3/4 max-w-120 md:max-w-7/10">
+                    Hello
+                </div>
+            </div>
         </div>
     )
 }