style: arabic numbers in ranking selector, extra-eu badge dashed border

Author: lorenzocorallo

src/components/Homepage/RankingSelector.tsx

@@ -2,7 +2,6 @@ import { Link } from "@tanstack/react-router"
 import { useContext, useMemo } from "react"
 import MobileContext from "@/contexts/MobileContext"
 import { phaseGroupLabel } from "@/utils/phase"
-import { numberToRoman } from "@/utils/strings/numbers"
 import type { PhaseLink } from "@/utils/types/data/phase"
 import type { School } from "@/utils/types/data/school"
 import { cn } from "@/utils/ui"
@@ -265,5 +264,5 @@ function getRankingLabel(phase: PhaseLink) {
   if (phase.secondary === 0) {
     return "Generica"
   }
-  return numberToRoman(phase.secondary)
+  return `${phase.secondary}ª`
 }

src/components/PathBreadcrumb.tsx

@@ -81,11 +81,13 @@ function RankingInfo({ id }: { id: string }) {
             : `${numberToRoman(ranking.data.phase.primary)} Fase`}
         </Badge>
         <Badge variant="secondary">
-          {numberToRoman(ranking.data.phase.secondary)} Grad.
+          {ranking.data.phase.secondary
+            ? `${numberToRoman(ranking.data.phase.secondary)} Grad.`
+            : "Generica"}
         </Badge>
         {ranking.data.phase.isExtraEu && (
           <Badge
-            className="dark:border-amber-500 dark:text-amber-500"
+            className="border-dashed dark:border-amber-500 dark:text-amber-500"
             variant="outline"
           >
             Extra-UE