feat: add tools in routes

Author: smithg09

src/Components/AppRoutes.tsx

@@ -7,6 +7,7 @@ import ErrorBoundary from "./ErrorBoundary";
 
 const componentMap = {
   jwt: loadable(() => import("../Features/jwt/JWT")) as React.ComponentType,
+  escape: loadable(() => import("../Features/escape/BackslashEscape")) as React.ComponentType,
   markdown: loadable(() => import("../Features/markdown/Markdown")) as React.ComponentType,
   "har-viewer": loadable(() => import("../Features/har/HarViewer")) as React.ComponentType,
   "ssh-keys": loadable(() => import("../Features/ssh/SSH")) as React.ComponentType,
@@ -20,6 +21,8 @@ const componentMap = {
   rest: loadable(() => import("../Features/rest/Rest")) as React.ComponentType,
   graphiql: loadable(() => import("../Features/graphiql/GraphiQL")) as React.ComponentType,
   epoch: loadable(() => import("../Features/epoch/Epoch")) as React.ComponentType,
+  dns: loadable(() => import("../Features/dns/DnsLookup")) as React.ComponentType,
+  hmac: loadable(() => import("../Features/hmac/HmacGenerator")) as React.ComponentType,
   "url-parser": loadable(() => import("@/Features/url/UrlParser")) as React.ComponentType,
   "url-encoder": loadable(() => import("@/Features/url/UrlEncoder")) as React.ComponentType,
 };

src/Features/url/UrlParser.tsx

@@ -83,7 +83,7 @@ export default function UrlParser() {
   return (
     <Stack p="sm" gap="xs" style={{ height: "100%", overflow: "auto" }}>
       <Group justify="space-between">
-        <Text fw={600}>URL</Text>
+        <Text fw={600}>URL Parser</Text>
         <CopyButton
           value={state.input}
           label="Copy URL"

src/constants/tools.tsx

@@ -2,8 +2,10 @@ import {
   BsBox,
   BsClock,
   BsClockHistory,
+  BsCodeSlash,
   BsFiletypeSvg,
   BsGlobe,
+  BsHash,
   BsLink45Deg,
   BsMarkdown,
   BsPercent,
@@ -12,7 +14,7 @@ import {
   BsShieldLock,
 } from "react-icons/bs";
 import { SiJsonwebtokens } from "react-icons/si";
-import { TbApi, TbBrandGraphql } from "react-icons/tb";
+import { TbApi, TbBrandGraphql, TbWorldSearch } from "react-icons/tb";
 
 export const tools = [
   {
@@ -64,6 +66,13 @@ export const tools = [
     text: "HAR Viewer",
     description: "Inspect performance, requests, and waterfalls from HAR files",
   },
+  {
+    id: "dns",
+    path: "/dns",
+    icon: <TbWorldSearch />,
+    text: "DNS Lookup",
+    description: "Query multiple resolvers, DNSSEC, and reverse lookups",
+  },
   {
     id: "epoch",
     path: "/epoch",
@@ -99,6 +108,13 @@ export const tools = [
     text: "ID Generator",
     description: "Create UUIDs, NanoIDs, and custom IDs for apps",
   },
+  {
+    id: "hmac",
+    path: "/hmac",
+    icon: <BsHash />,
+    text: "HMAC Generator",
+    description: "Compute HMAC signatures using Web Crypto",
+  },
   {
     id: "url-parser",
     path: "/url-parser",
@@ -113,4 +129,11 @@ export const tools = [
     text: "URL Encoder",
     description: "Encode, decode, and sanitize URLs for safe sharing",
   },
+  {
+    id: "escape",
+    path: "/escape",
+    icon: <BsCodeSlash />,
+    text: "Backslash Escape",
+    description: "Escape or unescape strings with backslash sequences",
+  },
 ];

src/index.css

@@ -44,6 +44,10 @@ body {
   z-index: 999999999;
 }
 
+.overflow-auto {
+  overflow: auto;
+}
+
 .overflow-padding {
   padding: 10px;
   padding-top: 1rem;