From 3e6155ffeff2916e2c463b5ef759242c8c2146fb Mon Sep 17 00:00:00 2001
From: Shintaro Jokagi <taroj1205@gmail.com>
Date: Thu, 15 May 2025 23:10:31 +1200
Subject: [PATCH] chore(biome): update config and fix issues

---
 biome.json                  |  6 +----
 package.json                |  4 +--
 src/components/ModsList.tsx | 50 ++++++++++++++++++-------------------
 tailwind.config.mjs         | 13 ++++++----
 4 files changed, 35 insertions(+), 38 deletions(-)

diff --git a/biome.json b/biome.json
index a47fe1a..1f2f33b 100644
--- a/biome.json
+++ b/biome.json
@@ -20,11 +20,7 @@
     "useEditorconfig": true
   },
   "files": {
-    "ignore": [
-      "node_modules",
-      ".git",
-      "dist"
-    ]
+    "ignore": ["node_modules", ".git", "dist"]
   },
   "javascript": {
     "formatter": {
diff --git a/package.json b/package.json
index 06bc126..79a587d 100644
--- a/package.json
+++ b/package.json
@@ -45,8 +45,6 @@
     "wrangler": "^3.94.0"
   },
   "lint-staged": {
-    "src/**/*.{ts,tsx,astro,js,jsx}": [
-      "biome check --write ./src"
-    ]
+    "src/**/*.{ts,tsx,astro,js,jsx}": ["biome check --write ./src"]
   }
 }
diff --git a/src/components/ModsList.tsx b/src/components/ModsList.tsx
index 5fcf584..7629732 100644
--- a/src/components/ModsList.tsx
+++ b/src/components/ModsList.tsx
@@ -89,36 +89,36 @@ export default function ModsList({ allMods, locale }: ModsListProps) {
     return (
       <div className="mx-auto mb-12 flex items-center justify-center gap-4 px-8">
         <button
-          type="button"
-          onClick={() => navigatePage(page - 1)}
           className={`px-3 py-2 ${page === 1 ? 'pointer-events-none text-gray-400' : 'text-dark hover:text-gray-600'}`}
+          onClick={() => navigatePage(page - 1)}
+          type="button"
         >
           &lt;
         </button>
-        <form onSubmit={handlePageSubmit} className="flex items-center gap-2">
+        <form className="flex items-center gap-2" onSubmit={handlePageSubmit}>
           {mods.pagination.pagination.split('{input}').map((value, index) => {
             if (index === 0) {
               return (
                 <input
+                  aria-label="Page number"
+                  className="w-16 rounded border border-dark bg-transparent px-2 py-1 text-center text-sm"
+                  onInput={handlePageInputChange}
                   type="text"
                   value={pageInput}
-                  onInput={handlePageInputChange}
-                  className="w-16 rounded border border-dark bg-transparent px-2 py-1 text-center text-sm"
-                  aria-label="Page number"
                 />
               )
             }
             return (
-              <span key={value} className="text-sm">
+              <span className="text-sm" key={value}>
                 {value.replace('{totalPages}', totalPages.toString()).replace('{totalItems}', totalItems.toString())}
               </span>
             )
           })}
         </form>
         <button
-          type="button"
-          onClick={() => navigatePage(page + 1)}
           className={`px-3 py-2 ${page === totalPages ? 'pointer-events-none text-gray-400' : 'text-dark hover:text-gray-600'}`}
+          onClick={() => navigatePage(page + 1)}
+          type="button"
         >
           &gt;
         </button>
@@ -131,21 +131,21 @@ export default function ModsList({ allMods, locale }: ModsListProps) {
       <div className="flex flex-col items-center gap-4">
         <div className="flex w-full flex-col items-center justify-center gap-6">
           <input
-            type="text"
-            id="search"
             className="w-full rounded-full border-2 border-dark bg-transparent px-6 py-2 text-lg outline-none"
-            placeholder={mods.search}
-            value={search}
+            id="search"
             onInput={handleSearch}
+            placeholder={mods.search}
+            type="text"
+            value={search}
           />
         </div>
 
         <div className="grid w-full grid-cols-2 place-items-center gap-4 sm:grid-cols-3">
           <div className="flex flex-col items-start gap-2">
             <button
-              type="button"
-              onClick={toggleCreatedSort}
               className="flex items-center gap-2 px-4 py-2 font-semibold text-md"
+              onClick={toggleCreatedSort}
+              type="button"
             >
               {mods.sort.lastCreated}
               <span
@@ -159,9 +159,9 @@ export default function ModsList({ allMods, locale }: ModsListProps) {
 
           <div className="flex flex-col items-center gap-2">
             <button
-              type="button"
-              onClick={toggleUpdatedSort}
               className="flex items-center gap-2 px-4 py-2 font-semibold text-md"
+              onClick={toggleUpdatedSort}
+              type="button"
             >
               {mods.sort.lastUpdated}
               <span
@@ -174,14 +174,14 @@ export default function ModsList({ allMods, locale }: ModsListProps) {
           </div>
 
           <div className="flex items-center gap-2 px-4 py-2">
-            <label htmlFor="limit" className="font-semibold text-md">
+            <label className="font-semibold text-md" htmlFor="limit">
               {mods.sort.perPage}
             </label>
             <select
-              id="limit"
-              value={limit}
-              onInput={handleLimitChange}
               className="rounded border border-dark bg-transparent px-2 py-1 text-sm [&>option]:text-black"
+              id="limit"
+              onInput={handleLimitChange}
+              value={limit}
             >
               <option value="12">12</option>
               <option value="24">24</option>
@@ -196,16 +196,16 @@ export default function ModsList({ allMods, locale }: ModsListProps) {
         {paginatedMods.length > 0 ? (
           paginatedMods.map((mod) => (
             <a
-              key={mod.id}
-              href={`/mods/${mod.id}`}
               className="flex w-full flex-col gap-4 border-transparent transition-colors duration-100 hover:opacity-90"
+              href={`/mods/${mod.id}`}
+              key={mod.id}
             >
               <div className="relative mb-0 block aspect-[1.85/1] h-48 overflow-hidden rounded-md border-2 border-dark object-cover shadow-md">
                 <img
-                  src={mod.image}
                   alt={mod.name}
-                  loading="lazy"
                   className="h-full w-full object-cover transition-transform duration-100 hover:scale-105"
+                  loading="lazy"
+                  src={mod.image}
                 />
               </div>
               <div>
diff --git a/tailwind.config.mjs b/tailwind.config.mjs
index fd020ea..db8d903 100644
--- a/tailwind.config.mjs
+++ b/tailwind.config.mjs
@@ -20,11 +20,14 @@ export default {
       center: true,
     },
     fontFamily: {
-      junicode: ['Junicode, serif', {
-        fontFeatureSettings: {
-          'swsh': 1
-        }
-      }],
+      junicode: [
+        'Junicode, serif',
+        {
+          fontFeatureSettings: {
+            swsh: 1,
+          },
+        },
+      ],
     },
     extend: {
       screens: {