feat: add detail page

app/[locale]/(main)/detail/[id]/page.tsx

@@ -0,0 +1,7 @@
+export default function Page({ params }: { params: { id: string } }) {
+  return (
+    <div className="mx-auto grid w-full max-w-5xl gap-4 md:gap-6">
+      {params.id}
+    </div>
+  );
+}

components/ServerCard.tsx

@@ -36,35 +36,39 @@ export default function ServerCard({
         "flex flex-col items-center justify-start gap-3 p-3 md:px-5 lg:flex-row"
       }
     >
-      <Popover>
+      {/* <Popover>
         <PopoverTrigger asChild>
-          <section
+          
-            className="grid items-center gap-2 lg:w-28"
-            style={{ gridTemplateColumns: "auto auto 1fr" }}
-          >
-            <span className="h-2 w-2 shrink-0 rounded-full bg-green-500 self-center"></span>
-            <div
-              className={cn(
-                "flex items-center justify-center",
-                showFlag ? "min-w-[17px]" : "min-w-0",
-              )}
-            >
-              {showFlag ? <ServerFlag country_code={country_code} /> : null}
-            </div>
-            <p
-              className={cn(
-                "break-all font-bold tracking-tight",
-                showFlag ? "text-xs" : "text-sm",
-              )}
-            >
-              {name}
-            </p>
-          </section>
         </PopoverTrigger>
         <PopoverContent side="top">
           <ServerCardPopover status={props.status} host={props.host} />
         </PopoverContent>
-      </Popover>
+      </Popover> */}
+      <section
+        className="grid items-center gap-2 lg:w-28 cursor-pointer"
+        style={{ gridTemplateColumns: "auto 1fr auto" }}
+        onClick={() => {
+          router.push(`/${locale}/detail/${id}`);
+        }}
+      >
+        <div
+          className={cn(
+            "flex items-center justify-center",
+            showFlag ? "min-w-[17px]" : "min-w-0",
+          )}
+        >
+          {showFlag ? <ServerFlag country_code={country_code} /> : null}
+        </div>
+        <p
+          className={cn(
+            "break-all font-bold tracking-tight",
+            showFlag ? "text-xs" : "text-sm",
+          )}
+        >
+          {name}
+        </p>
+        <span className="h-2 w-2 shrink-0 rounded-full bg-green-500 self-center"></span>
+      </section>
       <div
         onClick={() => {
           router.push(`/${locale}/${id}`);