Migrate to typescript

src/tools/cyphers_and_cryptography/base64/Base64Tool.module.scss.d.ts

@@ -0,0 +1,4 @@
+export const center: string;
+export const flexList: string;
+export const layoutBox: string;
+export const title: string;

src/tools/cyphers_and_cryptography/base64/Base64Tool.tsx

@@ -13,11 +13,13 @@ const Base64Tool = () => {
 
     useEffect(() => {
         if(!reversed) {
+            // @ts-ignore
             const buf = new Buffer.from(input)
             setOutput(buf.toString("base64"))
         }
 
         if(reversed) {
+            // @ts-ignore
             const buf = new Buffer.from(output, "base64")
             setInput(buf.toString("utf-8"))
         }

src/tools/cyphers_and_cryptography/rot/RotTool.module.scss.d.ts

@@ -0,0 +1,4 @@
+export const center: string;
+export const flexList: string;
+export const layoutBox: string;
+export const title: string;

src/tools/cyphers_and_cryptography/rot/RotTool.tsx

@@ -22,9 +22,9 @@ const RotTool = () => {
         let max = 122; // This is z
         let range = max - min; // The length of the alphabet
 
-        let rotInput = reversed ? output.toLowerCase() : input.toLowerCase();
+        let rotInputStr = reversed ? output.toLowerCase() : input.toLowerCase();
 
-        rotInput = rotInput.split('');
+        let rotInput = rotInputStr.split('');
         
         let hasOutOfRange = false;
 
@@ -46,9 +46,9 @@ const RotTool = () => {
 
         setOutOfRangeWarning(hasOutOfRange);
 
-        rotOut = rotOut.join('').toUpperCase();
+        let rotOutStr = rotOut.join('').toUpperCase();
 
-        reversed ? setInput(rotOut) : setOutput(rotOut)
+        reversed ? setInput(rotOutStr) : setOutput(rotOutStr)
     }, [input, output, reversed, offset])
     
     return (
@@ -62,7 +62,7 @@ const RotTool = () => {
 
                 <p><Trans i18nKey={"tools.cryptography.rot.description"} components={{wikipedia: <a href="https://en.wikipedia.org/wiki/ROT13">xxx</a>, pre: <pre/>}} /></p>
 
-                <BoxMessage icon={AlertOctagon} color="red" hideInPlace={!outOfRangeWarning}>{t("tools.cryptography.rot.outOfRangeWarning")}</BoxMessage>
+                <BoxMessage icon={<AlertOctagon/>} color="red" hideInPlace={!outOfRangeWarning}>{t("tools.cryptography.rot.outOfRangeWarning")}</BoxMessage>
 
                 <label htmlFor="rot-input">{t("tools.cryptography.common.cleartext")}</label>
                 <textarea id="rot-input" placeholder={t("tools.cryptography.common.cleartext")} onChange={(e) => {setReversed(false); setInput(e.currentTarget.value.toUpperCase());}} value={input}></textarea>

src/tools/tools.ts

@@ -1,10 +1,11 @@
-{
-    "tools": [
+import {Smile, PlusSquare, Binary} from "lucide-react"
+
+const tools = [
         {
             "name": "Test01",
             "external": true,
             "url": "https://kevink.dev",
-            "icon": "Smile",
+            "icon": Smile,
             "category": "osm",
             "hidden": true
         },
@@ -12,7 +13,7 @@
             "name": "ROT-N",
             "external": false,
             "urlname": "rot",
-            "icon": "PlusSquare",
+            "icon": PlusSquare,
             "category": "cryptography",
             "hidden": false,
             "keywords": "rot, rot-n, caesar, rotation, cryptography, encryption, decryption"
@@ -21,10 +22,11 @@
             "name": "Base64",
             "external": false,
             "urlname": "base64",
-            "icon": "Binary",
+            "icon": Binary,
             "category": "cryptography",
             "hidden": false,
             "keywords": "binary, base64, base, 64, cryptography, encryption, decryption"
         }
     ]
-}
+
+export default tools