page: tools page: base64

app/[locale]/tools/base64/page.tsx

@@ -0,0 +1,10 @@
+import { useTranslations } from "next-intl";
+
+export default function Base64() {
+    const t = useTranslations("tools");
+    return (
+        <div>
+            <h1 className="text-3xl font-semibold">{t("base64.title")}</h1>
+        </div>
+    );
+}

app/[locale]/tools/layout.tsx

@@ -0,0 +1,10 @@
+export default function ToolsLayout({ children }: { children: React.ReactNode }) {
+    return (
+        <div className="h-screen w-screen overflow-x-hidden bg-white dark:bg-[rgb(23,25,29)]">
+            <main className="relative h-full w-full md:w-3/4 lg:w-1/2 left-0 md:left-[12.5%] lg:left-1/4
+                    pt-12">
+                {children}
+            </main>
+        </div>
+    );
+}

components/index.tsx

@@ -1,7 +1,6 @@
 "use client";
 
-import { useEffect } from "react";
-import { useRecoilState, useSetRecoilState } from "recoil";
+import { useRecoilValue, useSetRecoilState } from "recoil";
 import { settingsState } from "./state/settings";
 import Search from "./search/search";
 import { bgFocusState } from "./state/background";
@@ -17,7 +16,7 @@ const Time = dynamic(() => import("./time"), {
 });
 
 export default function Homepage() {
-    const [settings, setSettings] = useRecoilState(settingsState);
+    const settings = useRecoilValue(settingsState);
     const setFocus = useSetRecoilState(bgFocusState);
 
     return (

messages/en-US.json

@@ -18,5 +18,10 @@
     },
     "About": {
         "title": "SparkHome"
+    },
+    "tools": {
+        "base64": {
+            "title": "Base64 tools - LuminaraUtils"
+        }
     }
 }

messages/zh-CN.json

@@ -15,5 +15,10 @@
     },
     "404": {
         "title": "未找到"
+    },
+    "tools": {
+        "base64": {
+            "title": "Base64 工具"
+        }
     }
 }