Updated sidebar

src/app/(stats)/player/[ign]/_components/Sidebar.tsx

@@ -25,9 +25,8 @@ export default function Sidebar({ level, ign, player, guild, rank, specialRank,
     const levelMultiplierVal = levelMultiplier.value
     const levelMultiplierText = levelMultiplier.level === true ? `(Level ${level.toFixed(1).split(".")[0]})` : `(${levelMultiplier.name})`
 
+    function General() {
         return (
-        <Card className="w-1/4">
-            <CardContent>
             <div className="flex justify-between px-8">
                 <div className="text-center">
                     <p>Hypixel level</p>
@@ -38,7 +37,11 @@ export default function Sidebar({ level, ign, player, guild, rank, specialRank,
                     <p className="text-mc-light-purple">{formatNumber(player.karma)}</p>
                 </div>
             </div>
-                <Separator className="my-4" />
+        )
+    }
+
+    function Coins() {
+        return (
             <div>
                 <p>
                     <span className="font-bold">{"Coin multiplier: "}</span>
@@ -51,7 +54,11 @@ export default function Sidebar({ level, ign, player, guild, rank, specialRank,
                     </span>
                 </p>
             </div>
-                <Separator className="my-4" />
+        )
+    }
+
+    function Other() {
+        return (
             <div>
                 <p>
                     <span>
@@ -76,7 +83,11 @@ export default function Sidebar({ level, ign, player, guild, rank, specialRank,
                     <span>{formatNumber(getTotalChallenges(player.challenges))}</span>
                 </p>
             </div>
-                <Separator className="my-4" />
+        )
+    }
+
+    function DailyRewards() {
+        return (
             <div>
                 <p>
                     <span className="font-bold">{"Today's Reward: "}</span>
@@ -99,7 +110,11 @@ export default function Sidebar({ level, ign, player, guild, rank, specialRank,
                     <span>{player.rewardHighScore}</span>
                 </p>
             </div>
-                <Separator className="my-4" />
+        )
+    }
+
+    function Gifting() {
+        return (
             <div>
                 <p>
                     <span className="font-bold">{"Gifts Given: "}</span>
@@ -110,7 +125,11 @@ export default function Sidebar({ level, ign, player, guild, rank, specialRank,
                     <span>{player.giftingMeta?.ranksGiven ?? 0}</span>
                 </p>
             </div>
-                <Separator className="my-4" />
+        )
+    }
+
+    function Logins() {
+        return (
             <div>
                 <p>
                     <span className="font-bold">{"First Login: "}</span>
@@ -121,6 +140,40 @@ export default function Sidebar({ level, ign, player, guild, rank, specialRank,
                     <span>{formatDate(player.lastLogin ?? 0)}</span>
                 </p>
             </div>
+        )
+    }
+
+    function SoicalLinks() {
+        return (
+            <div className="flex flex-col gap-2">
+                <h1 className="text-xl font-bold underline">Social Links</h1>
+                <div className="flex gap-2">
+                    <SocialIcons
+                        discord={player?.socialMedia?.links?.DISCORD}
+                        twitch={player?.socialMedia?.links?.TWITCH}
+                        youtube={player?.socialMedia?.links?.YOUTUBE}
+                        twitter={player?.socialMedia?.links?.TWITCH}
+                        hypixel={player?.socialMedia?.links?.HYPIXEL}
+                    />
+                </div>
+            </div>
+        )
+    }
+
+    return (
+        <Card className="w-1/4">
+            <CardContent>
+                <General />
+                <Separator className="my-4" />
+                <Coins />
+                <Separator className="my-4" />
+                <Other />
+                <Separator className="my-4" />
+                <DailyRewards />
+                <Separator className="my-4" />
+                <Gifting />
+                <Separator className="my-4" />
+                <Logins />
                 <Separator className="my-4" />
                 {guild && (
                     <>
@@ -163,18 +216,7 @@ export default function Sidebar({ level, ign, player, guild, rank, specialRank,
                         <Separator className="my-4" />
                     </>
                 )}
-                <div className="flex flex-col gap-2">
+                <SoicalLinks />
-                    <h1 className="text-xl font-bold underline">Social Links</h1>
-                    <div className="flex gap-2">
-                        <SocialIcons
-                            discord={player?.socialMedia?.links?.DISCORD}
-                            twitch={player?.socialMedia?.links?.TWITCH}
-                            youtube={player?.socialMedia?.links?.YOUTUBE}
-                            twitter={player?.socialMedia?.links?.TWITCH}
-                            hypixel={player?.socialMedia?.links?.HYPIXEL}
-                        />
-                    </div>
-                </div>
             </CardContent>
         </Card>
     )