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,13 +36,21 @@ 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>
+          
+        </PopoverTrigger>
+        <PopoverContent side="top">
+          <ServerCardPopover status={props.status} host={props.host} />
+        </PopoverContent>
+      </Popover> */}
       <section
-            className="grid items-center gap-2 lg:w-28"
+        className="grid items-center gap-2 lg:w-28 cursor-pointer"
-            style={{ gridTemplateColumns: "auto auto 1fr" }}
+        style={{ gridTemplateColumns: "auto 1fr auto" }}
+        onClick={() => {
+          router.push(`/${locale}/detail/${id}`);
+        }}
       >
-            <span className="h-2 w-2 shrink-0 rounded-full bg-green-500 self-center"></span>
         <div
           className={cn(
             "flex items-center justify-center",
@@ -59,12 +67,8 @@ export default function ServerCard({
         >
           {name}
         </p>
+        <span className="h-2 w-2 shrink-0 rounded-full bg-green-500 self-center"></span>
       </section>
-        </PopoverTrigger>
-        <PopoverContent side="top">
-          <ServerCardPopover status={props.status} host={props.host} />
-        </PopoverContent>
-      </Popover>
       <div
         onClick={() => {
           router.push(`/${locale}/${id}`);