feat: show ip info

src/components/icon.tsx

@@ -1,6 +1,6 @@
 import { MouseEventHandler } from "react";
 
-import Icons from "../icons.svg";
+import Icons from "../icons.svg?url";
 
 type Props = {
   name: string;

src/components/vps-actions.tsx

@@ -11,16 +11,25 @@ export default function VmActions({ vm }: { vm: VmInstance }) {
           name={state === "running" ? "stop" : "start"}
           className="bg-neutral-700 p-2 rounded-lg hover:bg-neutral-600"
           size={40}
+          onClick={e => {
+            e.stopPropagation();
+          }}
         />
         <Icon
           name="delete"
           className="bg-neutral-700 p-2 rounded-lg hover:bg-neutral-600"
           size={40}
+          onClick={e => {
+            e.stopPropagation();
+          }}
         />
         <Icon
           name="refresh-1"
           className="bg-neutral-700 p-2 rounded-lg hover:bg-neutral-600"
           size={40}
+          onClick={e => {
+            e.stopPropagation();
+          }}
         />
       </div>
     </div>

src/components/vps-instance.tsx

@@ -1,15 +1,19 @@
-import { Link } from "react-router-dom";
+import { Link, useNavigate } from "react-router-dom";
 import { VmInstance } from "../api";
 import OsImageName from "./os-image-name";
 import VpsResources from "./vps-resources";
 import VmActions from "./vps-actions";
 
-export default function VpsInstanceRow({ vm }: { vm: VmInstance }) {
+export default function VpsInstanceRow({ vm, actions }: { vm: VmInstance, actions?: boolean }) {
   const expires = new Date(vm.expires);
   const isExpired = expires <= new Date();
+  const navigate = useNavigate();
 
   return (
-    <div className="flex justify-between items-center rounded-xl bg-neutral-900 px-3 py-2 cursor-pointer hover:bg-neutral-800">
+    <div className="flex justify-between items-center rounded-xl bg-neutral-900 px-3 py-2 cursor-pointer hover:bg-neutral-800"
+      onClick={() => navigate("/vm", {
+        state: vm
+      })}>
       <div className="flex flex-col gap-2">
         <div>
           <span className="text-sm text-neutral-400">#{vm.id}</span>
@@ -22,7 +26,7 @@ export default function VpsInstanceRow({ vm }: { vm: VmInstance }) {
         </div>
         <VpsResources vm={vm} />
       </div>
-      <div className="flex gap-2 items-center">
+      {(actions ?? true) && <div className="flex gap-2 items-center">
         {isExpired && (
           <>
             <Link to="/vm/renew" className="text-red-500 text-sm" state={vm}>
@@ -31,7 +35,7 @@ export default function VpsInstanceRow({ vm }: { vm: VmInstance }) {
           </>
         )}
         {!isExpired && <VmActions vm={vm} />}
-      </div>
+      </div>}
     </div>
   );
 }