style: mobile layout for year select, some ranking picker changes

Author: lorenzocorallo

src/app/_home/$school/$year/index.tsx

@@ -39,7 +39,7 @@ function RouteComponent() {
             Seleziona graduatoria
           </h2>
           <p className="text-slate-600 text-sm dark:text-slate-400">
-            Filtra e scegli la graduatoria da consultare per{" "}
+            Scegli la graduatoria da consultare per{" "}
             <span className="font-medium">{school}</span> {year}
           </p>
         </div>

src/app/_home/$school/index.tsx

@@ -27,62 +27,53 @@ function RouteComponent() {
     .map(Number)
     .sort((a, b) => b - a)
 
-  const currentYear = new Date().getFullYear()
-
   return (
     <Page>
       <PathBreadcrumb />
-      <div className="w-full space-y-4">
-        <div className="space-y-1">
-          <h2 className="font-semibold text-slate-900 text-xl dark:text-slate-100">
-            Anno di immatricolazione
-          </h2>
-          <p className="text-slate-600 text-sm dark:text-slate-400">
-            Seleziona l'anno accademico di cui vuoi consultare le graduatorie
-          </p>
-        </div>
+      <div className="space-y-1">
+        <h2 className="font-semibold text-slate-900 text-xl dark:text-slate-100">
+          Anno di immatricolazione
+        </h2>
+        <p className="text-slate-600 text-sm dark:text-slate-400">
+          Seleziona l'anno accademico di cui vuoi consultare le graduatorie
+        </p>
+      </div>
 
-        <div className="flex flex-wrap gap-2">
-          {years.map((year, index) => {
-            const isRecent = year >= currentYear - 1
-            const isFirst = index === 0
+      <div className="flex max-sm:grid grid-cols-2 flex-wrap gap-3 w-full">
+        {years.map((year, index) => {
+          const isFirst = index === 0
 
-            return (
-              <Link
-                key={year}
-                to="/$school/$year"
-                params={{ school, year }}
-                className="group"
+          return (
+            <Link
+              key={year}
+              to="/$school/$year"
+              params={{ school, year }}
+              className="group"
+            >
+              <Badge
+                size="large"
+                variant="secondary"
+                className={cn(
+                  "cursor-pointer border transition-all hover:bg-slate-200 dark:hover:bg-slate-700/80 justify-center w-full",
+                  isFirst
+                    ? "border-amber-700/30 shadow-[0px_2px_10px_#ffae1082,inset_0px_-4px_20px_#ffb52575] dark:border-amber-200/90 dark:shadow-[0px_3px_8px_rgba(186,130,21,0.32),inset_0px_-4px_20px_rgba(186,130,21,0.43)]"
+                    : ""
+                )}
               >
-                <Badge
-                  variant={isFirst ? "default" : "secondary"}
-                  size="medium"
-                  className={cn(
-                    "cursor-pointer transition-all",
-                    "hover:scale-105",
-                    isFirst &&
-                      "ring-2 ring-slate-900/20 dark:ring-slate-100/20",
-                    isRecent && !isFirst && "border-green-500/30"
-                  )}
-                >
-                  {year}
-                  {isRecent && (
-                    <span className="ml-1.5 h-1.5 w-1.5 rounded-full bg-green-500" />
-                  )}
-                </Badge>
-              </Link>
-            )
-          })}
-        </div>
-
-        {years.length > 0 && (
-          <p className="text-slate-500 text-xs dark:text-slate-500">
-            {years.length}{" "}
-            {years.length === 1 ? "anno disponibile" : "anni disponibili"} dal{" "}
-            {years[years.length - 1]} al {years[0]}
-          </p>
-        )}
+                {year}
+              </Badge>
+            </Link>
+          )
+        })}
       </div>
+
+      {years.length > 0 && (
+        <p className="text-slate-500 text-xs dark:text-slate-500">
+          {years.length}{" "}
+          {years.length === 1 ? "anno disponibile" : "anni disponibili"} dal{" "}
+          {years[years.length - 1]} al {years[0]}
+        </p>
+      )}
     </Page>
   )
 }

src/components/Homepage/RankingSelector.tsx

@@ -150,8 +150,6 @@ function LanguageColumn({
   school: School
   year: number
 }) {
-  // const hasMultiplePhases = groups.length > 1
-
   return (
     <div className="overflow-hidden rounded-xl border-2 border-slate-200 bg-white dark:border-slate-700 dark:bg-slate-800/50">
       {/* Column header */}

src/components/ui/badge.tsx

@@ -22,6 +22,7 @@ const badgeVariants = cva(
         tiny: "px-2.5 py-0.5 text-xs",
         small: "px-3 py-1 text-sm",
         medium: "px-4 py-1.5 text-md",
+        large: "px-8 py-2 text-lg",
       },
     },
     defaultVariants: {