From 0a2453d02b1cdb62b8cab7abfaac5d2642062089 Mon Sep 17 00:00:00 2001
From: nischay2x <77281955+nischay2x@users.noreply.github.com>
Date: Sat, 15 Jun 2024 10:39:23 +0000
Subject: [PATCH 1/2] feat: added sidebar collapse for less than 'md' screen

---
 src/app/components/common/ToolList.tsx | 121 +++++++++++++++----------
 src/app/globals.css                    |  12 +++
 src/app/tools/layout.tsx               |  12 +--
 3 files changed, 87 insertions(+), 58 deletions(-)

diff --git a/src/app/components/common/ToolList.tsx b/src/app/components/common/ToolList.tsx
index 6aef38d..d0f3d14 100644
--- a/src/app/components/common/ToolList.tsx
+++ b/src/app/components/common/ToolList.tsx
@@ -101,55 +101,78 @@ export const toolList: ToolOption[] = [
 export default function ToolList() {
   const pathname = usePathname();
   return (
-    <div className="w-72 bg-gray-700 flex shrink-0 flex-col overflow-y-scroll">
-      <SignedIn>
-        <div className={"px-2 my-4 flex justify-between w-full"}>
-          <UserButton afterSignOutUrl="/tools/json-validator" />
-          <Button intent={"secondary"} href={"/tools/history"}>
-            View History
-          </Button>
-        </div>
-      </SignedIn>
-      <SignedOut>
-        <div className={"mx-2 my-4 flex flex-col gap-4"}>
-          <Button fullWidth intent={"primary"} href={"/sign-in"}>
-            Log in / Sign-up
-          </Button>
-          <p className={"text-xs text-gray-200"}>
-            {" "}
-            You only have to create an account if you want to upgrade to
-            DevToolbox Pro which saves your history so you can keep track of all
-            the actions you have done.
-          </p>
-        </div>
-      </SignedOut>
-      <Link
-        className={`w-full border-y py-3 px-4 hover:bg-gray-600`}
-        href={`https://github.com/YourAverageTechBro/DevToolboxWeb`}
-        target="_blank"
+    <>
+      <label
+        htmlFor="sidebar-toggle"
+        className="bg-indigo-500 md:hidden text-white px-2 py-1 rounded-md hover:bg-indigo-600 cursor-pointer absolute top-2 right-2"
       >
-        <div className={"flex items-center gap-2 "}>
-          <StarIcon className={"w-6 h-6"} />
-          Star Us On Github
-        </div>
-      </Link>
-      {toolList
-        .sort((a, b) => {
-          if (a.name < b.name) return -1;
-          else if (a.name > b.name) return 1;
-          return 0;
-        })
-        .map((toolOption) => (
-          <Link
-            className={`w-full border-b py-3 px-4 hover:bg-gray-600 ${
-              pathname === toolOption.path && "bg-gray-500"
-            }`}
-            key={toolOption.name}
-            href={toolOption.path}
-          >
-            <p> {toolOption.name}</p>
-          </Link>
-        ))}
-    </div>
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="24"
+          height="24"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="2"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          className="lucide lucide-menu"
+        >
+          <line x1="4" x2="20" y1="12" y2="12" />
+          <line x1="4" x2="20" y1="6" y2="6" />
+          <line x1="4" x2="20" y1="18" y2="18" />
+        </svg>
+      </label>
+      <input type="checkbox" id="sidebar-toggle" className="peer hidden" />
+      <div className="w-0 peer-checked:w-72 md:w-72 bg-gray-700 flex shrink-0 flex-col no-scrollbar overflow-y-scroll transition-all">
+        <SignedIn>
+          <div className={"px-2 my-4 flex justify-between w-full"}>
+            <UserButton afterSignOutUrl="/tools/json-validator" />
+            <Button intent={"secondary"} href={"/tools/history"}>
+              View History
+            </Button>
+          </div>
+        </SignedIn>
+        <SignedOut>
+          <div className={"mx-2 my-4 flex flex-col gap-4"}>
+            <Button fullWidth intent={"primary"} href={"/sign-in"}>
+              Log in / Sign-up
+            </Button>
+            <p className={"text-xs text-gray-200"}>
+              You only have to create an account if you want to upgrade to
+              DevToolbox Pro which saves your history so you can keep track of
+              all the actions you have done.
+            </p>
+          </div>
+        </SignedOut>
+        <Link
+          className={`w-full border-y py-3 px-4 hover:bg-gray-600`}
+          href={`https://github.com/YourAverageTechBro/DevToolboxWeb`}
+          target="_blank"
+        >
+          <div className={"flex items-center gap-2 "}>
+            <StarIcon className={"w-6 h-6"} />
+            Star Us On Github
+          </div>
+        </Link>
+        {toolList
+          .sort((a, b) => {
+            if (a.name < b.name) return -1;
+            else if (a.name > b.name) return 1;
+            return 0;
+          })
+          .map((toolOption) => (
+            <Link
+              className={`w-full border-b py-3 px-4 hover:bg-gray-600 ${
+                pathname === toolOption.path && "bg-gray-500"
+              }`}
+              key={toolOption.name}
+              href={toolOption.path}
+            >
+              <p> {toolOption.name}</p>
+            </Link>
+          ))}
+      </div>
+    </>
   );
 }
diff --git a/src/app/globals.css b/src/app/globals.css
index fd81e88..bd533de 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -25,3 +25,15 @@ body {
     )
     rgb(var(--background-start-rgb));
 }
+
+@layer utilities {
+  /* Hide scrollbar for Chrome, Safari and Opera */
+  .no-scrollbar::-webkit-scrollbar {
+    display: none;
+  }
+  /* Hide scrollbar for IE, Edge and Firefox */
+  .no-scrollbar {
+    -ms-overflow-style: none; /* IE and Edge */
+    scrollbar-width: none; /* Firefox */
+  }
+}
diff --git a/src/app/tools/layout.tsx b/src/app/tools/layout.tsx
index ed24bde..2307c7b 100644
--- a/src/app/tools/layout.tsx
+++ b/src/app/tools/layout.tsx
@@ -6,16 +6,10 @@ export default function ToolsLayout({
   children: React.ReactNode;
 }) {
   return (
-    <div className={"h-full w-full flex gap-4"}>
-      {" "}
+    <div className={"h-full w-full flex"}>
       <ToolList />
-      <div
-        className={"pt-4 px-4 flex-1 overflow-x-hidden"}
-      >
-        <div style={{height: "calc(100% - 2rem)"}}>
-          {" "}
-          {children}{" "}
-        </div>
+      <div className={"pt-14 md:pt-4 px-4 flex-1 overflow-x-hidden"}>
+        <div style={{ height: "calc(100% - 2rem)" }}>{children}</div>
       </div>
     </div>
   );

From 61712101678e21df174aa813053661cf3d7b8dff Mon Sep 17 00:00:00 2001
From: nischay2x <77281955+nischay2x@users.noreply.github.com>
Date: Sat, 15 Jun 2024 12:02:57 +0000
Subject: [PATCH 2/2] feat: Color Palette Generator for light and dark theme

---
 package-lock.json                             | 17 ++++
 package.json                                  |  1 +
 src/app/components/common/ToolList.tsx        |  4 +
 .../ColorPaletteGeneratorComponent.tsx        | 86 +++++++++++++++++++
 .../tools/color-palette-generator/page.tsx    | 18 ++++
 5 files changed, 126 insertions(+)
 create mode 100644 src/app/tools/color-palette-generator/ColorPaletteGeneratorComponent.tsx
 create mode 100644 src/app/tools/color-palette-generator/page.tsx

diff --git a/package-lock.json b/package-lock.json
index 46d250d..dff080b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,6 +9,7 @@
       "version": "0.1.0",
       "hasInstallScript": true,
       "dependencies": {
+        "@ant-design/colors": "^7.0.2",
         "@clerk/nextjs": "^4.25.7",
         "@headlessui/react": "^1.7.17",
         "@heroicons/react": "^2.0.18",
@@ -68,6 +69,14 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/@ant-design/colors": {
+      "version": "7.0.2",
+      "resolved": "https://registry.npmjs.org/@ant-design/colors/-/colors-7.0.2.tgz",
+      "integrity": "sha512-7KJkhTiPiLHSu+LmMJnehfJ6242OCxSlR3xHVBecYxnMW8MS/878NXct1GqYARyL59fyeFdKRxXTfvR9SnDgJg==",
+      "dependencies": {
+        "@ctrl/tinycolor": "^3.6.1"
+      }
+    },
     "node_modules/@babel/code-frame": {
       "version": "7.22.13",
       "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.22.13.tgz",
@@ -439,6 +448,14 @@
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.1.tgz",
       "integrity": "sha512-DJR/VvkAvSZW9bTouZue2sSxDwdTN92uHjqeKVm+0dAqdfNykRzQ95tay8aXMBAAPpUiq4Qcug2L7neoRh2Egw=="
     },
+    "node_modules/@ctrl/tinycolor": {
+      "version": "3.6.1",
+      "resolved": "https://registry.npmjs.org/@ctrl/tinycolor/-/tinycolor-3.6.1.tgz",
+      "integrity": "sha512-SITSV6aIXsuVNV3f3O0f2n/cgyEDWoSqtZMYiAmcsYHydcKrOz3gUxB/iXd/Qf08+IZX4KpgNbvUdMBmWz+kcA==",
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/@emotion/babel-plugin": {
       "version": "11.11.0",
       "resolved": "https://registry.npmjs.org/@emotion/babel-plugin/-/babel-plugin-11.11.0.tgz",
diff --git a/package.json b/package.json
index 2f853bc..fcc93e8 100644
--- a/package.json
+++ b/package.json
@@ -10,6 +10,7 @@
     "postinstall": "prisma generate"
   },
   "dependencies": {
+    "@ant-design/colors": "^7.0.2",
     "@clerk/nextjs": "^4.25.7",
     "@headlessui/react": "^1.7.17",
     "@heroicons/react": "^2.0.18",
diff --git a/src/app/components/common/ToolList.tsx b/src/app/components/common/ToolList.tsx
index d0f3d14..376f1c3 100644
--- a/src/app/components/common/ToolList.tsx
+++ b/src/app/components/common/ToolList.tsx
@@ -60,6 +60,10 @@ export const toolList: ToolOption[] = [
     name: "Color Converter",
     path: "/tools/color-converter",
   },
+  {
+    name: "Color Palette Generator",
+    path: "/tools/color-palette-generator",
+  },
   {
     name: "Hash Generator",
     path: "/tools/hash-generator",
diff --git a/src/app/tools/color-palette-generator/ColorPaletteGeneratorComponent.tsx b/src/app/tools/color-palette-generator/ColorPaletteGeneratorComponent.tsx
new file mode 100644
index 0000000..f9d5a76
--- /dev/null
+++ b/src/app/tools/color-palette-generator/ColorPaletteGeneratorComponent.tsx
@@ -0,0 +1,86 @@
+"use client";
+import { useEffect, useState } from "react";
+import { generate } from "@ant-design/colors";
+
+export default function ColorPaletteGenerator() {
+  const [baseColor, setBaseColor] = useState<string>("#b512e2");
+  const [lightPalette, setLightPalette] = useState<string[]>([]);
+  const [darkPalette, setDarkPalette] = useState<string[]>([]);
+  const generatePalettes = () => {
+    let lp = generate(baseColor);
+    let dP = generate(baseColor, {
+      theme: "dark",
+      backgroundColor: "#141414",
+    });
+
+    setLightPalette(lp);
+    setDarkPalette(dP);
+  };
+
+  useEffect(() => {
+    generatePalettes();
+  }, []);
+
+  return (
+    <div className="space-y-4">
+      <h1 className="text-lg font-semibold">Color Palette Generator</h1>
+      <div className="flex items-center gap-2 p-2 border rounded bg-white">
+        <label htmlFor="color" className="text-black">
+          Input:
+        </label>
+        <input
+          type="color"
+          name="color"
+          id="color"
+          value={baseColor}
+          onChange={(e) => {
+            setBaseColor(e.target.value);
+          }}
+        />
+        <span className="border text-black px-1 text-sm uppercase">
+          {baseColor}
+        </span>
+        <button
+          onClick={generatePalettes}
+          className="bg-indigo-500 hover:bg-indigo-400 text-white text-sm px-2 py-1 ml-auto rounded"
+        >
+          Generate
+        </button>
+      </div>
+
+      <div className="p-2 border rounded space-y-4 bg-white">
+        <div className="text-center space-y-2 border rounded-md shadow-md py-2">
+          <h2 className="text-lg text-black font-semibold">Light Theme</h2>
+          <div className="flex flex-wrap gap-3 justify-center">
+            {lightPalette.map((color, idx) => (
+              <div key={idx} className="flex flex-col items-center gap-1">
+                <div
+                  className="w-14 h-14 rounded"
+                  style={{ backgroundColor: color }}
+                ></div>
+                <div className="text-xs text-black uppercase">{color}</div>
+              </div>
+            ))}
+          </div>
+        </div>
+        <div
+          className="text-center space-y-2 border rounded-md shadow-md py-2"
+          style={{ backgroundColor: "#141414" }}
+        >
+          <h2 className="text-lg font-semibold">Dark Theme</h2>
+          <div className="flex flex-wrap gap-3 justify-center">
+            {darkPalette.map((color, idx) => (
+              <div key={idx} className="flex flex-col items-center gap-1">
+                <div
+                  className="w-14 h-14 rounded"
+                  style={{ backgroundColor: color }}
+                ></div>
+                <div className="text-xs uppercase">{color}</div>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/app/tools/color-palette-generator/page.tsx b/src/app/tools/color-palette-generator/page.tsx
new file mode 100644
index 0000000..1f41b9f
--- /dev/null
+++ b/src/app/tools/color-palette-generator/page.tsx
@@ -0,0 +1,18 @@
+import ColorPaletteGeneratorComponent from "./ColorPaletteGeneratorComponent";
+import { Metadata } from "next";
+
+export const metadata: Metadata = {
+  title: "Dev Toolbox - Color Palette Generator",
+  description:
+    "Light and Dark theme color palette generator. Powered by @ant-designs/color.",
+  keywords: ["color", "palette", "generator", "light", "dark"],
+  openGraph: {
+    title: "Dev Toolbox - Color Palette Generator",
+    description:
+      "Light and Dark theme color palette generator. Powered by @ant-designs/color.",
+  },
+};
+const ColorPaletteGenerator = () => {
+  return <ColorPaletteGeneratorComponent />;
+};
+export default ColorPaletteGenerator;