update: setup layouts and basic ui

src/app/test/page.tsx

@@ -0,0 +1,58 @@
+"use client"
+import { CardButton } from "@/components/test/CardButton";
+import { useGlobalShortcut } from "@/hooks/tauri/shortcuts";
+import { invoke } from "@tauri-apps/api/core";
+import { useCallback, useState } from "react";
+
+export default function Page() {
+  const [buttonDesc, setButtonDesc] = useState<string>(
+    "Waiting to be clicked. This calls 'on_button_clicked' from Rust."
+  );
+  const onButtonClick = () => {
+    invoke<string>("on_button_clicked")
+      .then((value) => {
+        setButtonDesc(value);
+      })
+      .catch(() => {
+        setButtonDesc("Failed to invoke Rust command 'on_button_clicked'");
+      });
+  };
+
+  const shortcutHandler = useCallback(() => {
+    console.log("Ctrl+P was pressed!");
+  }, []);
+  useGlobalShortcut("CommandOrControl+P", shortcutHandler);
+
+  return (
+    <div className="flex flex-col">
+      <main className="flex flex-col items-center justify-center flex-1 py-8">
+        <h1 className="m-0 text-6xl text-center">
+          Welcome to{" "}
+          <a
+            href="https://nextjs.org"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="text-blue-600 hover:underline focus:underline active:underline"
+          >
+            Next.js!
+          </a>
+        </h1>
+
+        <p className="my-12 text-2xl leading-9 text-center">
+          Get started by editing{" "}
+          <code className="p-2 font-mono text-xl bg-gray-200 rounded-md">
+            src/pages/index.tsx
+          </code>
+        </p>
+
+        <div className="flex flex-wrap items-center justify-center max-w-3xl">
+          <CardButton
+            onClick={onButtonClick}
+            title="Tauri Invoke"
+            description={buttonDesc}
+          />
+        </div>
+      </main>
+    </div>
+  );
+}