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 6aef38d..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", @@ -101,55 +105,78 @@ export const toolList: ToolOption[] = [ export default function ToolList() { const pathname = usePathname(); return ( -
- -
- - -
- - -
- -

- {" "} - 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. -

-
- - +
+ + + + + + + +
+ +
+ + +
+ + +
+ +

+ 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. +

+
+ + +
+ + Star Us On Github +
+ + {toolList + .sort((a, b) => { + if (a.name < b.name) return -1; + else if (a.name > b.name) return 1; + return 0; + }) + .map((toolOption) => ( + +

{toolOption.name}

+ + ))} +
+ ); } 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/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("#b512e2"); + const [lightPalette, setLightPalette] = useState([]); + const [darkPalette, setDarkPalette] = useState([]); + const generatePalettes = () => { + let lp = generate(baseColor); + let dP = generate(baseColor, { + theme: "dark", + backgroundColor: "#141414", + }); + + setLightPalette(lp); + setDarkPalette(dP); + }; + + useEffect(() => { + generatePalettes(); + }, []); + + return ( +
+

Color Palette Generator

+
+ + { + setBaseColor(e.target.value); + }} + /> + + {baseColor} + + +
+ +
+
+

Light Theme

+
+ {lightPalette.map((color, idx) => ( +
+
+
{color}
+
+ ))} +
+
+
+

Dark Theme

+
+ {darkPalette.map((color, idx) => ( +
+
+
{color}
+
+ ))} +
+
+
+
+ ); +} 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 ; +}; +export default ColorPaletteGenerator; 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 ( -
- {" "} +
-
-
- {" "} - {children}{" "} -
+
+
{children}
);