home image fit theme

pages/index.mdx

@@ -1,87 +1,97 @@
 import Image from "next/image";
-import { useState } from "react";
-import { useEffect } from "react";
+import { useState, useEffect } from "react";
+import { useTheme } from "next-themes";
 import packageInfo from './../package.json'
 
 export default function Home() {
-  const {version} = packageInfo
+  const { resolvedTheme } = useTheme()
+  console.log(resolvedTheme)
+  const { version } = packageInfo
   const [downloadUrl, setDownloadUrl] = useState('')
   const [platform, setPlatform] = useState("Windows")
   useEffect(() => {
-    const {userAgent} = navigator;
+    const { userAgent } = navigator;
     const isWindows = userAgent.indexOf('Windows') > -1
     const isMac = userAgent.indexOf('Macintosh') > -1
     const isLinux = userAgent.indexOf('Linux') > -1
-    if(isWindows){
+    if (isWindows) {
       setPlatform("Windows")
       setDownloadUrl(`https://github.com/lerte/ngroker-app/releases/download/v${version}/Ngroker_${version}_x64-setup.exe`)
     }
-    if(isMac){
+    if (isMac) {
       setPlatform("macOS")
       setDownloadUrl(`https://github.com/lerte/ngroker-app/releases/download/v${version}/Ngroker_${version}_aarch64.dmg`)
     }
-    if(isLinux){
+    if (isLinux) {
       setPlatform("Linux")
       setDownloadUrl(`https://github.com/lerte/ngroker-app/releases/download/v${version}/ngroker_${version}_amd64.AppImage`)
     }
 
-},[])
+  }, [])
 
-return (
+  return (
 
-<div className="container-fluid h-full grid place-content-center">
-  <div className="p-4 sm:p-6 md:p-8 flex gap-4 sm:gap-6 md:gap-8 flex-col sm:flex-row items-center rounded-2xl border border-[rgb(229,231,235)] dark:border-[rgba(224,243,255,0.1)]">
-    <div className="basis-full sm:basis-1/3 gap-4 flex flex-col justify-center">
-      <strong>
-        Ngroker is amazingly simple to use. Get authtoken from{" "}
-        <a
-          target="_blank"
-          href="https://dashboard.ngrok.com/get-started/your-authtoken"
-        >
-          ngrok
-        </a>{" "}
-        and your development life will become easy.
-      </strong>
-      <a
-        type="button"
-        href={downloadUrl}
-        className="no-underline justify-center flex gap-4 rounded-xl px-6 py-3.5 text-base font-medium text-white bg-gradient-to-br from-purple-600 to-blue-500 hover:bg-gradient-to-bl focus:ring-4 focus:outline-none focus:ring-blue-300 dark:focus:ring-blue-800"
-      >
-        <span>Download for {platform}</span>
-        <svg
-          fill="none"
-          width="24"
-          height="24"
-          strokeWidth="2"
-          viewBox="0 0 24 24"
-          stroke="currentColor"
-          strokeLinecap="round"
-          strokeLinejoin="round"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path d="M12 17V3" />
-          <path d="m6 11 6 6 6-6" />
-          <path d="M19 21H5" />
-        </svg>
-      </a>
-      <small className="text-center">
-        <ul className="list-none">
-          <li>Auto Dark Mode</li>
-          <li>Internationalization</li>
-          <li>Compatible with ngrok</li>
-        </ul>
-      </small>
+    <div className="container-fluid h-full grid place-content-center">
+      <div className="p-4 sm:p-6 md:p-8 flex gap-4 sm:gap-6 md:gap-8 flex-col sm:flex-row items-center rounded-2xl border border-[rgb(229,231,235)] dark:border-[rgba(224,243,255,0.1)]">
+        <div className="basis-full sm:basis-1/3 gap-4 flex flex-col justify-center">
+          <strong>
+            Ngroker is amazingly simple to use. Get authtoken from{" "}
+            <a
+              target="_blank"
+              href="https://dashboard.ngrok.com/get-started/your-authtoken"
+            >
+              ngrok
+            </a>{" "}
+            and your development life will become easy.
+          </strong>
+          <a
+            type="button"
+            href={downloadUrl}
+            className="no-underline justify-center flex gap-4 rounded-xl px-6 py-3.5 text-base font-medium text-white bg-gradient-to-br from-purple-600 to-blue-500 hover:bg-gradient-to-bl focus:ring-4 focus:outline-none focus:ring-blue-300 dark:focus:ring-blue-800"
+          >
+            <span>Download for {platform}</span>
+            <svg
+              fill="none"
+              width="24"
+              height="24"
+              strokeWidth="2"
+              viewBox="0 0 24 24"
+              stroke="currentColor"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path d="M12 17V3" />
+              <path d="m6 11 6 6 6-6" />
+              <path d="M19 21H5" />
+            </svg>
+          </a>
+          <small className="text-center">
+            <ul className="list-none">
+              <li>Auto Dark Mode</li>
+              <li>Internationalization</li>
+              <li>Compatible with ngrok</li>
+            </ul>
+          </small>
+        </div>
+        <div className="basis-full sm:basis-2/3 flex justify-end">
+          {resolvedTheme == 'dark' ?
+            <Image
+              width={795}
+              height={508}
+              alt="ngroker download"
+              src="/screenshots/dark.png"
+            /> :
+            <Image
+              width={795}
+              height={508}
+              alt="ngroker download"
+              src="/screenshots/light.png"
+            />
+          }
+        </div>
+      </div>
     </div>
-    <div className="basis-full sm:basis-2/3">
-      <Image
-        alt="ngroker download"
-        src="/screenshots/tunnel-sessions.png"
-        width={1283}
-        height={820}
-      />
-    </div>
-  </div>
-</div>
 
-);
+  );
 }