From 7cd826b05280d97111bcdbb66bf807e6929bfa6d Mon Sep 17 00:00:00 2001
From: typist <1003659191@qq.com>
Date: Tue, 28 Oct 2025 04:39:39 +0800
Subject: [PATCH] feat: add-tool `base64` (#7)

Co-authored-by: typist <git@mail.typist.cc>
Reviewed-on: https://gitea.typist.cc/typist/litek/pulls/7
---
 src/components/tool/base64.tsx | 70 ++++++++++++++++++++++++++++++++++
 src/components/tool/index.tsx  | 10 ++++-
 src/layout.tsx                 |  4 +-
 3 files changed, 81 insertions(+), 3 deletions(-)
 create mode 100644 src/components/tool/base64.tsx

diff --git a/src/components/tool/base64.tsx b/src/components/tool/base64.tsx
new file mode 100644
index 0000000..f47b957
--- /dev/null
+++ b/src/components/tool/base64.tsx
@@ -0,0 +1,70 @@
+import { useState, type FC } from "react";
+import { Textarea } from "@/components/ui/textarea";
+import { Button } from "@/components/ui/button";
+import { toast } from "sonner";
+import { ArrowLeftIcon, ArrowRightIcon } from "lucide-react";
+
+const Tool: FC = () => {
+  const [decoded, setDecoded] = useState<string>("");
+  const [encoded, setEncoded] = useState<string>("");
+
+  const encode = () => {
+    try {
+      const encoded64 = btoa(decoded);
+      setEncoded(encoded64);
+      setDecoded("");
+      toast.success("encoded successfully");
+    } catch (error: unknown) {
+      if (error instanceof Error) {
+        toast.error(error.message);
+      } else {
+        toast.error("encoding failed");
+      }
+    }
+  };
+
+  const decode = () => {
+    try {
+      const decoded64 = atob(encoded);
+      setDecoded(decoded64);
+      setEncoded("");
+      toast.success("decoded successfully");
+    } catch (error: unknown) {
+      if (error instanceof Error) {
+        toast.error(error.message);
+      } else {
+        toast.error("decoding failed");
+      }
+    }
+  };
+
+  return (
+    <div className="h-[50vh] flex flex-row gap-4 pt-[20vh]">
+      <Textarea
+        className="flex-1 resize-none"
+        placeholder="Enter the original text"
+        value={decoded}
+        onChange={(e) => setDecoded(e.target.value)}
+      />
+      <div className="flex flex-col gap-2 justify-center">
+        <Button onClick={encode}>
+          <ArrowRightIcon className="size-4" />
+          Encode
+        </Button>
+        <Button onClick={decode}>
+          <ArrowLeftIcon className="size-4" />
+          Decode
+        </Button>
+      </div>
+      <Textarea
+        className="flex-1 resize-none"
+        placeholder="Enter the Base64 encoded text"
+        value={encoded}
+        onChange={(e) => setEncoded(e.target.value)}
+      />
+    </div>
+  );
+};
+
+export default Tool;
+
diff --git a/src/components/tool/index.tsx b/src/components/tool/index.tsx
index 44e56ac..735a1d8 100644
--- a/src/components/tool/index.tsx
+++ b/src/components/tool/index.tsx
@@ -1,8 +1,9 @@
 import type { ReactNode } from 'react';
-import { FileJson, Hash } from 'lucide-react'
+import { FileJson, Hash, Binary } from 'lucide-react'
 
 import UUID from './uuid'
 import JSON from './json'
+import Base64 from './base64'
 
 export interface Tool {
   path: string;
@@ -26,5 +27,12 @@ export const tools: Tool[] = [
     description: "Format and validate JSON",
     icon: <FileJson />,
     component: <JSON />,
+  },
+  {
+    path: "base64",
+    name: "Base64 Encoder/Decoder",
+    description: "Encode and decode Base64",
+    icon: <Binary />,
+    component: <Base64 />,
   }
 ];
\ No newline at end of file
diff --git a/src/layout.tsx b/src/layout.tsx
index b8755e5..868feeb 100644
--- a/src/layout.tsx
+++ b/src/layout.tsx
@@ -7,12 +7,12 @@ import { AppSidebar } from "@/components/sidebar";
 export const Layout: FC = () => (
   <SidebarProvider>
     <AppSidebar />
-    <div className="p-4 flex flex-col w-full h-[100vh]">
+    <div className="p-4 flex flex-col w-full h-[100vh] overflow-hidden">
       <nav className="flex items-center justify-between">
         <SidebarTrigger className="size-10" />
         <div role="actions" />
       </nav>
-      <main className="flex-1 overflow-auto p-4">
+      <main className="flex-1 overflow-auto p-4 overflow-hidden">
         <Outlet />
       </main>
     </div>