add new routes and menu

ui/src/components/General/PopupSearch/index.tsx

@@ -1,5 +1,5 @@
 import { Input, InputRef, Modal } from "antd";
-import { MENU_ITEMS } from "components/Layouts/Menu/utils/constants";
+import { MENU_ITEMS } from "data/menuData";
 import React, { useEffect, useRef, useState } from "react";
 import { useNavigate } from "react-router-dom";
 import style from "./PopSearch.module.scss";

ui/src/components/Layouts/Menu/index.tsx

@@ -1,6 +1,6 @@
 import { Menu as AntdMenu, Layout } from "antd";
 import { To, useNavigate } from "react-router-dom";
-import { ITEMS } from "./utils/constants";
+import { ITEMS } from "data/menuData";
 import { MenuProps } from "./utils/types";
 import style from "./Menu.module.scss";
 import { classNames } from "utils/helper-functions/string";

ui/src/components/Layouts/Menu/utils/constants.ts → ui/src/data/menuData.ts

@@ -53,7 +53,7 @@ export const MENU_ITEMS = [
 				name: routesById.boxshadow.title,
 				url: routesById.boxshadow.path,
 				icon: "Box",
-				show: IN_DEVELOPMENT,
+				show: true,
 			},
 		],
 	},
@@ -188,6 +188,19 @@ export const MENU_ITEMS = [
 			},
 		],
 	},
+	{
+		name: "Automation",
+		icon: "Workflow",
+		show: true,
+		children: [
+			{
+				name: routesById.creategithubissue.title,
+				url: routesById.creategithubissue.path,
+				icon: "Bug",
+				show: IN_DEVELOPMENT,
+			},
+		],
+	},
 	{
 		name: "Information",
 		icon: "BadgeInfo",

ui/src/data/routeData.tsx

@@ -9,8 +9,11 @@ type RouteId =
 	| "book"
 	| "borderradius"
 	| "boxshadow"
+	| "codeformatter"
 	| "colorpicker"
+	| "cookiepolicy"
 	| "course"
+	| "creategithubissue"
 	| "data"
 	| "designsystem"
 	| "diagramming"
@@ -25,7 +28,6 @@ type RouteId =
 	| "image"
 	| "interview"
 	| "jsontotypescript"
-	| "codeformatter"
 	| "mimetype"
 	| "mimetype"
 	| "movie"
@@ -37,7 +39,6 @@ type RouteId =
 	| "platform"
 	| "plugin"
 	| "privacypolicy"
-	| "cookiepolicy"
 	| "qrcode"
 	| "shadesandtints"
 	| "sorting"
@@ -370,6 +371,13 @@ export const routes: Route[] = [
 			"Ever wondered what’s different? We did too! Play spot the difference with text.",
 		component: Diffchecker,
 	},
+	{
+		id: "creategithubissue",
+		path: "/automation-scripts/create-github-issue",
+		title: "Create Github Issue",
+		description: "Create Github Issue",
+		component: PageNotFound,
+	},
 	{
 		id: "/",
 		path: "/",

ui/src/pages/About/About.module.scss

@@ -27,6 +27,8 @@
 					),
 					url("src/assets/About/card_bg.jpg") no-repeat left / cover;
 
+				background-blend-mode: color-dodge;
+
 				object-fit: cover;
 				background-color: #9c9c9c98;
 				display: flex;

ui/src/pages/CSS/BoxShadow/index.tsx

@@ -117,7 +117,7 @@ const BoxShadow = () => {
 			<Card>
 				<CodeHighlightWithCopy
 					codeString={generateCSSCodeString()}
-					language="json"
+					language="css"
 				/>
 			</Card>
 		</div>

ui/src/pages/Colors/ShadesAndTints/components/ColorInputs.tsx

@@ -21,7 +21,7 @@ import {
 } from "components/General/FormComponents";
 import ColorPickerWithInput from "components/General/ColorPickerWithInput";
 import { ChangeEvent } from "react";
-import { SelectOption } from "../utils/types";
+import { SelectOption } from "pages/Colors/ShadesAndTints/utils/types";
 
 interface ColorInputsProps {
 	color: string;

ui/src/pages/Data/Avatar/__tests__/Avatar.test.tsx → ui/src/pages/Generator/Avatar/__tests__/Avatar.test.tsx

@@ -1,7 +1,7 @@
 import { render, screen } from "@testing-library/react";
 import { describe, test, expect } from "vitest";
 import user from "@testing-library/user-event";
-import Avatar from "pages/Data/Avatar";
+import Avatar from "pages/Generator/Avatar";
 
 describe("Avatar component", () => {
 	test("render component without crash", () => {

ui/src/pages/Data/ImageGeneratorFromColors/__tests__/ImageGeneratorFromColors.test.tsx → ui/src/pages/Generator/ImageGeneratorFromColors/__tests__/ImageGeneratorFromColors.test.tsx

@@ -1,7 +1,7 @@
 import { render, screen } from "@testing-library/react";
 import { describe, test } from "vitest";
 import user from "@testing-library/user-event";
-import ImageGeneratorFromColors from "pages/Data/ImageGeneratorFromColors";
+import ImageGeneratorFromColors from "pages/Generator/ImageGeneratorFromColors";
 
 describe("Image Generator component", () => {
 	test("render a component without crash", () => {

ui/src/pages/pages.ts

@@ -20,12 +20,12 @@ const Pixel = lazy(() => import("pages/Converter/Pixel"));
 const JsonToTypescript = lazy(() => import("pages/Converter/JsonToTypescript"));
 const CodeFormatter = lazy(() => import("pages/Converter/CodeFormatter"));
 
-const DataGenerator = lazy(() => import("pages/Data/DataGenerator"));
+const DataGenerator = lazy(() => import("pages/Generator/DataGenerator"));
 const ImageGeneratorFromColors = lazy(
-	() => import("pages/Data/ImageGeneratorFromColors")
+	() => import("pages/Generator/ImageGeneratorFromColors")
 );
-const Avatar = lazy(() => import("pages/Data/Avatar"));
-const QRcode = lazy(() => import("pages/Data/QRcode"));
+const Avatar = lazy(() => import("pages/Generator/Avatar"));
+const QRcode = lazy(() => import("pages/Generator/QRcode"));
 
 const Blog = lazy(() => import("pages/Resource/Blog"));
 const Book = lazy(() => import("pages/Resource/Book"));

ui/src/routes/index.tsx

@@ -1,7 +1,7 @@
 import { Suspense } from "react";
 import { Route, Routes as RRDRoutes } from "react-router-dom";
 import withPageTitle from "components/Hoc/withPageTitle/withPageTitle";
-import { routes } from "../data/routeData";
+import { routes } from "data/routeData";
 import Spin from "components/General/Spin";
 
 const Routes: React.FC = () => {