Finished player stats

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

@@ -114,7 +114,7 @@ export function PlayerStats(
         "tkr": <TkrStats stats={stats.TurboKartRacers} />
     } as const
 
-    const defaultOrder = Object.keys(statsComponents)
+    const defaultOrder = Object.keys(statsComponents).sort()
     const orderToUse = layout || defaultOrder
 
     const sensors = useSensors(

src/app/(stats)/player/[ign]/_stats/classic/tkrkart.tsx

@@ -1,6 +1,7 @@
 import { getTkrKart } from "@/lib/hypixel/classic/general"
 import { NonNullStats } from "@/lib/schema/player"
 import { cn } from "@/lib/utils"
+import { ChevronRight } from "lucide-react"
 
 export default function TkrKart({ stats }: { stats: NonNullable<NonNullStats["TurboKartRacers"]> }) {
     const { engine, frame, turbocharger } = getTkrKart(stats.engine_active, stats.frame_active, stats.booster_active)
@@ -17,9 +18,7 @@ export default function TkrKart({ stats }: { stats: NonNullable<NonNullStats["Tu
                                 return (
                                     <div key={i} className="flex justify-between">
                                         <p>{e.name}</p>
-                                        <p className="text-mc-green">
+                                        <RightArrows amount={e.level} className="text-mc-green" />
-                                            {e.level}
-                                        </p>
                                     </div>
                                 )
                             })}
@@ -34,7 +33,7 @@ export default function TkrKart({ stats }: { stats: NonNullable<NonNullStats["Tu
                                 return (
                                     <div key={i} className="flex justify-between">
                                         <p>{e.name}</p>
-                                        <p className="text-mc-green">{e.level}</p>
+                                        <RightArrows amount={e.level} className="text-mc-green" />
                                     </div>
                                 )
                             })}
@@ -51,7 +50,7 @@ export default function TkrKart({ stats }: { stats: NonNullable<NonNullStats["Tu
                                 return (
                                     <div key={i} className="flex justify-between">
                                         <p>{e.name}</p>
-                                        <p className="text-mc-green">{e.level}</p>
+                                        <RightArrows amount={e.level} className="text-mc-green" />
                                     </div>
                                 )
                             })}
@@ -62,3 +61,11 @@ export default function TkrKart({ stats }: { stats: NonNullable<NonNullStats["Tu
         </div>
     )
 }
+
+function RightArrows({ amount, className }: { amount: number, className?: string }) {
+    return (
+        <div className={cn("flex -space-x-4", className)}>
+            {Array.from({ length: amount }, (_, i) => <ChevronRight key={i} />)}
+        </div>
+    )
+}