Added first part of duel stats

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

@@ -0,0 +1,72 @@
+import { AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion"
+import { Card, CardContent } from "@/components/ui/card"
+import { formatNumber } from "@/lib/formatters"
+import { getDivision, getMostPlayed } from "@/lib/hypixel/duels/duels"
+import { romanize } from "@/lib/hypixel/general"
+import { NonNullStats } from "@/lib/schema/player"
+import CollapsedStats from "../../_components/CollapsedStats"
+
+export default function DuelsStats({ stats }: { stats: NonNullStats["Duels"] }) {
+    if (!stats) return null
+
+    const wl = formatNumber(stats.wins / stats.losses)
+    const div = getDivision("all_modes", stats)
+    const mostPlayed = getMostPlayed(stats)
+
+    return (
+        <AccordionItem value="duels">
+            <Card className="py-0">
+                <CardContent>
+                    <AccordionTrigger className="items-center hover:no-underline hover:cursor-pointer">
+                        <h1 className="text-xl font-bold">Duels</h1>
+                        <div className="flex gap-4">
+                            <CollapsedStats
+                                stats={[
+                                    {
+                                        title: <p>Division</p>,
+                                        stat: (
+                                            <p className="font-bold">
+                                                {div !== null ?
+                                                    (
+                                                        <span className={`text-mc-${div.color}`}>
+                                                            {`${div.name} ${romanize(div.level)}`}
+                                                        </span>
+                                                    ) :
+                                                    <span className="text-muted-foreground">-</span>}
+                                            </p>
+                                        )
+                                    },
+
+                                    {
+                                        title: <p>Wins</p>,
+                                        stat: (
+                                            <p className="font-bold">
+                                                {mostPlayed !== null ?
+                                                    (
+                                                        <span>
+                                                            {mostPlayed.name}
+                                                        </span>
+                                                    ) :
+                                                    <span className="text-muted-foreground">-</span>}
+                                            </p>
+                                        )
+                                    },
+                                    {
+                                        title: <p>Wins</p>,
+                                        stat: <p className="text-muted-foreground">{formatNumber(stats.wins)}</p>
+                                    },
+                                    {
+                                        title: <p>WL</p>,
+                                        stat: <p className="text-muted-foreground">{wl}</p>
+                                    }
+                                ]}
+                            />
+                        </div>
+                    </AccordionTrigger>
+                    <AccordionContent>
+                    </AccordionContent>
+                </CardContent>
+            </Card>
+        </AccordionItem>
+    )
+}