From ff1b00ff58fe6417e0f39516c99991ea11885538 Mon Sep 17 00:00:00 2001
From: Taken <taken@mairimashita.org>
Date: Sat, 27 Sep 2025 20:01:16 +0200
Subject: [PATCH] Updated sidebars with their own component

---
 src/app/(stats)/_components/sidebar.tsx       |  20 ++++
 .../guild/[value]/_components/sidebar.tsx     |  77 +++++-------
 .../player/[ign]/_components/sidebar.tsx      | 112 ++++--------------
 3 files changed, 77 insertions(+), 132 deletions(-)
 create mode 100644 src/app/(stats)/_components/sidebar.tsx

diff --git a/src/app/(stats)/_components/sidebar.tsx b/src/app/(stats)/_components/sidebar.tsx
new file mode 100644
index 0000000..a713230
--- /dev/null
+++ b/src/app/(stats)/_components/sidebar.tsx
@@ -0,0 +1,20 @@
+import { cn } from "@/lib/utils"
+import { ReactNode } from "react"
+
+export function BasicSidebarItem({ title, value, className }: { title: string, value: string | number, className?: string }) {
+    return (
+        <p>
+            <span className="font-bold">{title}</span>
+            <span className={cn("text-muted-foreground", className)}>{value}</span>
+        </p>
+    )
+}
+
+export function SidebarItem({ title, children }: { title: string, children: ReactNode }) {
+    return (
+        <div>
+            <span className="font-bold">{title}</span>
+            {children}
+        </div>
+    )
+}
diff --git a/src/app/(stats)/guild/[value]/_components/sidebar.tsx b/src/app/(stats)/guild/[value]/_components/sidebar.tsx
index 133c5ae..d1354bc 100644
--- a/src/app/(stats)/guild/[value]/_components/sidebar.tsx
+++ b/src/app/(stats)/guild/[value]/_components/sidebar.tsx
@@ -1,3 +1,4 @@
+import { BasicSidebarItem, SidebarItem } from "@/app/(stats)/_components/sidebar"
 import { GenericProgress } from "@/app/(stats)/player/[ign]/_components/generic-progress"
 import { ReplaceLinks } from "@/components/link-replace"
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
@@ -22,17 +23,18 @@ export default function Sidebar({ guild }: SidebarProps) {
         const nextXp = getGuildExp(Math.floor(level) + 1)
         return (
             <div>
-                <p className="font-bold">Leveling Progress</p>
-                <div className="flex gap-2 items-center mt-2">
-                    <p className={textColor}>{Math.floor(level)}</p>
-                    <GenericProgress
-                        percent={percent}
-                        tooltipId="guild-level-progress"
-                        tooltipContent={`${formatNumber(guild.exp - currentXp)}/${formatNumber(nextXp - currentXp)} GEXP`}
-                        className={bgColor}
-                    />
-                    <p className={textColor}>{Math.floor(level) + 1}</p>
-                </div>
+                <SidebarItem title="Leveling Progress">
+                    <div className="flex gap-2 items-center mt-2">
+                        <p className={textColor}>{Math.floor(level)}</p>
+                        <GenericProgress
+                            percent={percent}
+                            tooltipId="guild-level-progress"
+                            tooltipContent={`${formatNumber(guild.exp - currentXp)}/${formatNumber(nextXp - currentXp)} GEXP`}
+                            className={bgColor}
+                        />
+                        <p className={textColor}>{Math.floor(level) + 1}</p>
+                    </div>
+                </SidebarItem>
             </div>
         )
     }
@@ -40,18 +42,9 @@ export default function Sidebar({ guild }: SidebarProps) {
     function GeneralInfo() {
         return (
             <div>
-                <p>
-                    <span className="font-bold">{"Level: "}</span>
-                    <span>{formatNumber(level)}</span>
-                </p>
-                <p>
-                    <span className="font-bold">{"Created: "}</span>
-                    <span>{formatDate(guild.created)}</span>
-                </p>
-                <p>
-                    <span className="font-bold">{"Legacy Rank: "}</span>
-                    <span>{guild.legacyRanking !== undefined ? formatNumber(guild.legacyRanking) : "None"}</span>
-                </p>
+                <BasicSidebarItem title="Level: " value={formatNumber(level)} />
+                <BasicSidebarItem title="Created: " value={formatDate(guild.created)} />
+                <BasicSidebarItem title="Legacy Rank: " value={guild.legacyRanking !== undefined ? formatNumber(guild.legacyRanking) : "None"} />
             </div>
         )
     }
@@ -59,18 +52,9 @@ export default function Sidebar({ guild }: SidebarProps) {
     function Other() {
         return (
             <div>
-                <p>
-                    <span className="font-bold">{"Members: "}</span>
-                    <span>{guild.members.length}</span>
-                </p>
-                <p>
-                    <span className="font-bold">{"Publicly Listed: "}</span>
-                    <span>{guild.publiclyListed === true ? "Yes" : "No"}</span>
-                </p>
-                <p>
-                    <span className="font-bold">{"Publicly Joinable: "}</span>
-                    <span>{guild.joinable === true ? "Yes" : "No"}</span>
-                </p>
+                <BasicSidebarItem title="Members: " value={guild.members.length} />
+                <BasicSidebarItem title="Publicly Listed: " value={guild.publiclyListed === true ? "Yes" : "No"} />
+                <BasicSidebarItem title="Publicly Joinable: " value={guild.joinable === true ? "Yes" : "No"} />
             </div>
         )
     }
@@ -78,17 +62,18 @@ export default function Sidebar({ guild }: SidebarProps) {
     function PreferedGames() {
         return (
             <div>
-                <p>
-                    <span className="font-bold">{"Preferred Games: "}</span>
-                    {guild.preferredGames === undefined ? <span>No prefered games</span> : (
-                        <span>
-                            {guild.preferredGames.map(g => {
-                                const game = getGame(g)
-                                return game?.name || null
-                            }).filter(g => g !== null).sort().join(", ")}
-                        </span>
-                    )}
-                </p>
+                <SidebarItem title="Preferred Games: ">
+                    {guild.preferredGames === undefined ?
+                        <span className="text-muted-foreground">No prefered games</span> :
+                        (
+                            <span className="text-muted-foreground">
+                                {guild.preferredGames.map(g => {
+                                    const game = getGame(g)
+                                    return game?.name || null
+                                }).filter(g => g !== null).sort().join(", ")}
+                            </span>
+                        )}
+                </SidebarItem>
             </div>
         )
     }
diff --git a/src/app/(stats)/player/[ign]/_components/sidebar.tsx b/src/app/(stats)/player/[ign]/_components/sidebar.tsx
index 776d50d..8ef46b1 100644
--- a/src/app/(stats)/player/[ign]/_components/sidebar.tsx
+++ b/src/app/(stats)/player/[ign]/_components/sidebar.tsx
@@ -1,3 +1,4 @@
+import { BasicSidebarItem, SidebarItem } from "@/app/(stats)/_components/sidebar"
 import { Button } from "@/components/ui/button"
 import { Card, CardContent } from "@/components/ui/card"
 import { Separator } from "@/components/ui/separator"
@@ -47,16 +48,12 @@ export default function Sidebar({ level, ign, player, guild, rank, specialRank,
     function Coins() {
         return (
             <div>
-                <p>
-                    <span className="font-bold">{"Coin multiplier: "}</span>
-                    <span>{`x${levelMultiplierVal} ${levelMultiplierText}`}</span>
-                </p>
-                <p>
-                    <span className="font-bold">{"Total coins: "}</span>
+                <BasicSidebarItem title="Coin multiplier: " value={`x${levelMultiplierVal} ${levelMultiplierText}`} />
+                <SidebarItem title="Total coins: ">
                     <span className="text-mc-gold">
                         {formatNumber(getTotalCoins(player.stats))}
                     </span>
-                </p>
+                </SidebarItem>
             </div>
         )
     }
@@ -82,10 +79,7 @@ export default function Sidebar({ level, ign, player, guild, rank, specialRank,
                     <span className="font-bold">{": "}</span>
                     <span>{formatNumber(getTotalQuests(player.quests))}</span>
                 </p>
-                <p>
-                    <span className="font-bold">{"Challenges Completed: "}</span>
-                    <span>{formatNumber(getTotalChallenges(player.challenges))}</span>
-                </p>
+                <BasicSidebarItem title="Challenges Completed: " value={formatNumber(getTotalChallenges(player.challenges))} />
             </div>
         )
     }
@@ -93,26 +87,16 @@ export default function Sidebar({ level, ign, player, guild, rank, specialRank,
     function DailyRewards() {
         return (
             <div>
-                <p>
-                    <span className="font-bold">{"Today's Reward: "}</span>
+                <SidebarItem title="Today's Reward: ">
                     <span
                         className={`${rewardClaimed(player.lastClaimedReward) === true ? "font-bold text-mc-green" : undefined}`}
                     >
                         {rewardClaimed(player.lastClaimedReward) ? "Claimed" : "Unclaimed"}
                     </span>
-                </p>
-                <p>
-                    <span className="font-bold">{"Rewards Claimed: "}</span>
-                    <span>{player.totalRewards}</span>
-                </p>
-                <p>
-                    <span className="font-bold">{"Reward Streak: "}</span>
-                    <span>{player.rewardStreak}</span>
-                </p>
-                <p>
-                    <span className="font-bold">{"Top Reward Streak: "}</span>
-                    <span>{player.rewardHighScore}</span>
-                </p>
+                </SidebarItem>
+                <BasicSidebarItem title="Rewards Claimed: " value={player.totalRewards ?? 0} />
+                <BasicSidebarItem title="Reward Streak: " value={player.rewardStreak ?? 0} />
+                <BasicSidebarItem title="Top Reward Streak: " value={player.rewardHighScore ?? 0} />
             </div>
         )
     }
@@ -120,14 +104,8 @@ export default function Sidebar({ level, ign, player, guild, rank, specialRank,
     function Gifting() {
         return (
             <div>
-                <p>
-                    <span className="font-bold">{"Gifts Given: "}</span>
-                    <span>{player.giftingMeta?.giftsGiven ?? 0}</span>
-                </p>
-                <p>
-                    <span className="font-bold">{"Ranks Given: "}</span>
-                    <span>{player.giftingMeta?.ranksGiven ?? 0}</span>
-                </p>
+                <BasicSidebarItem title="Gifts Given: " value={player.giftingMeta?.giftsGiven ?? 0} />
+                <BasicSidebarItem title="Ranks Given: " value={player.giftingMeta?.ranksGiven ?? 0} />
             </div>
         )
     }
@@ -135,14 +113,8 @@ export default function Sidebar({ level, ign, player, guild, rank, specialRank,
     function Logins() {
         return (
             <div>
-                <p>
-                    <span className="font-bold">{"First Login: "}</span>
-                    <span>{formatDate(player.firstLogin ?? 0)}</span>
-                </p>
-                <p>
-                    <span className="font-bold">{"Last Login: "}</span>
-                    <span>{formatDate(player.lastLogin ?? 0)}</span>
-                </p>
+                <BasicSidebarItem title="First Login: " value={formatDate(player.firstLogin ?? 0)} />
+                <BasicSidebarItem title="Last Login: " value={formatDate(player.lastLogin ?? 0)} />
             </div>
         )
     }
@@ -167,35 +139,21 @@ export default function Sidebar({ level, ign, player, guild, rank, specialRank,
                         <Link href={`/guild/${ign}`}>
                             <h1 className="text-xl font-bold underline">Guild</h1>
                         </Link>
-                        <p>
-                            <span className="font-bold">{"Name: "}</span>
+                        <SidebarItem title="Name: ">
                             <span className={getColor(guild.tagColor, "text", "gray")}>{guild.name}</span>
-                        </p>
-                        <p>
-                            <span className="font-bold">{"Members: "}</span>
-                            <span>{guild.members.length}</span>
-                        </p>
+                        </SidebarItem>
+                        <BasicSidebarItem title="Members: " value={guild.members.length} />
                     </div>
                     <div>
-                        <p>
-                            <span className="font-bold">{"Rank: "}</span>
+                        <SidebarItem title="Rank: ">
                             <span>{`${getGuildMember(guild, player.uuid)?.rank} `}</span>
                             <span className={getColor(guild.tagColor, "text", "gray")}>
                                 {getGuildRankTag(guild, player.uuid)}
                             </span>
-                        </p>
-                        <p>
-                            <span className="font-bold">{"Daily GEXP: "}</span>
-                            <span>{formatNumber(getMemberGEXP(guild, player.uuid, 0) ?? 0)}</span>
-                        </p>
-                        <p>
-                            <span className="font-bold">{"Weekly GEXP: "}</span>
-                            <span>{formatNumber(getMemberWeeklyGEXP(guild, player.uuid) ?? 0)}</span>
-                        </p>
-                        <p>
-                            <span className="font-bold">{"Joined: "}</span>
-                            <span>{formatDate(getGuildMember(guild, player.uuid)?.joined ?? 0)}</span>
-                        </p>
+                        </SidebarItem>
+                        <BasicSidebarItem title="Daily GEXP: " value={formatNumber(getMemberGEXP(guild, player.uuid, 0) ?? 0)} />
+                        <BasicSidebarItem title="Weekly GEXP: " value={formatNumber(getMemberWeeklyGEXP(guild, player.uuid) ?? 0)} />
+                        <BasicSidebarItem title="Joined: " value={formatDate(getGuildMember(guild, player.uuid)?.joined ?? 0)} />
                     </div>
                 </div>
                 <Separator className="my-4" />
@@ -209,10 +167,7 @@ export default function Sidebar({ level, ign, player, guild, rank, specialRank,
                 <>
                     <div className="flex flex-col gap-2">
                         <h2 className="text-xl font-bold">Online Status</h2>
-                        <p>
-                            <span className="font-bold">{"Status: "}</span>
-                            <span>Offline</span>
-                        </p>
+                        <BasicSidebarItem title="Status: " value="Offline" />
                     </div>
                     <Separator className="my-4" />
                 </>
@@ -247,24 +202,9 @@ export default function Sidebar({ level, ign, player, guild, rank, specialRank,
                 <div className="flex flex-col gap-2">
                     <h2 className="text-xl font-bold">Online Status</h2>
                     <div>
-                        {session.gameType && (
-                            <p>
-                                <span className="font-bold">{"Game: "}</span>
-                                <span>{getGame(session.gameType)?.name || "Unknown"}</span>
-                            </p>
-                        )}
-                        {showMode && (
-                            <p>
-                                <span className="font-bold">{"Mode: "}</span>
-                                <span>{mode || "Unknown"}</span>
-                            </p>
-                        )}
-                        {showMap && (
-                            <p>
-                                <span className="font-bold">{"Map: "}</span>
-                                <span>{session.map}</span>
-                            </p>
-                        )}
+                        {session.gameType && <BasicSidebarItem title="Game: " value={getGame(session.gameType)?.name || "Unknown"} />}
+                        {showMode && <BasicSidebarItem title="Mode: " value={mode || "Unknown"} />}
+                        {showMap && <BasicSidebarItem title="Map: " value={session.map || "Unknown"} />}
                     </div>
                 </div>
                 <Separator className="my-4" />