From dacb719bdd96440cb89b322493149ea87b517518 Mon Sep 17 00:00:00 2001
From: ashik-75 <ashikex49@gmail.com>
Date: Tue, 12 Sep 2023 16:46:28 +0600
Subject: [PATCH 1/3] add svg & qrcode

---
 .../Layouts/Menu/utils/constants.ts           | 12 +++
 ui/src/pages/CSS/SvgFormatter/index.tsx       | 46 ++++++++++++
 ui/src/pages/CSS/SvgFormatter/utils/helper.ts | 35 +++++++++
 ui/src/pages/Data/QRcode/QRcode.module.scss   | 23 ++++++
 ui/src/pages/Data/QRcode/index.tsx            | 74 +++++++++++++++++++
 ui/src/pages/Data/QRcode/utils/helper.ts      | 39 ++++++++++
 ui/src/pages/Routes/utils/constant.tsx        | 12 +++
 ui/src/pages/info/Mimetype/index.tsx          |  7 +-
 .../pages/info/Mimetype/utils/constants.tsx   |  5 +-
 ui/src/pages/pages.ts                         |  4 +
 10 files changed, 250 insertions(+), 7 deletions(-)
 create mode 100644 ui/src/pages/CSS/SvgFormatter/index.tsx
 create mode 100644 ui/src/pages/CSS/SvgFormatter/utils/helper.ts
 create mode 100644 ui/src/pages/Data/QRcode/QRcode.module.scss
 create mode 100644 ui/src/pages/Data/QRcode/index.tsx
 create mode 100644 ui/src/pages/Data/QRcode/utils/helper.ts

diff --git a/ui/src/components/Layouts/Menu/utils/constants.ts b/ui/src/components/Layouts/Menu/utils/constants.ts
index d620e4f3..69d94bf0 100644
--- a/ui/src/components/Layouts/Menu/utils/constants.ts
+++ b/ui/src/components/Layouts/Menu/utils/constants.ts
@@ -41,6 +41,12 @@ export const MENU_ITEMS = [
 				icon: "Box",
 				show: IN_DEVELOPMENT,
 			},
+			{
+				name: "Svg Formatter",
+				url: "/css/svg-formatter",
+				icon: "Command",
+				show: IN_DEVELOPMENT,
+			},
 		],
 	},
 	{
@@ -91,6 +97,12 @@ export const MENU_ITEMS = [
 				icon: "BadgeHelp",
 				show: true,
 			},
+			{
+				name: "QR Code",
+				url: "/generator/qrcode",
+				icon: "QrCode",
+				show: true,
+			},
 			{
 				name: "Sorting",
 				url: "/generator/sorting",
diff --git a/ui/src/pages/CSS/SvgFormatter/index.tsx b/ui/src/pages/CSS/SvgFormatter/index.tsx
new file mode 100644
index 00000000..9cda991e
--- /dev/null
+++ b/ui/src/pages/CSS/SvgFormatter/index.tsx
@@ -0,0 +1,46 @@
+import { Card, Form, Input } from "antd";
+import CodeHighlightWithCopy from "components/General/CodeHighlightWithCopy";
+import PageGrid from "components/Layouts/PageGrid";
+import React, { ChangeEvent, useState } from "react";
+import { combineSVGPaths } from "./utils/helper";
+
+const { TextArea } = Input;
+
+const SvgFormatter: React.FC = () => {
+	const [value, setValue] = useState("");
+	const [combinedSVG, setCombinedSVG] = useState<string>("");
+
+	const handleChange = (e: ChangeEvent<HTMLTextAreaElement>) => {
+		const newValue = e.target.value;
+		setValue(newValue);
+
+		const combinedSvgOutput = combineSVGPaths(newValue);
+		setCombinedSVG(combinedSvgOutput);
+	};
+	return (
+		<PageGrid>
+			<Card>
+				<Form layout="vertical">
+					<Form.Item label="Svg Input">
+						<TextArea
+							placeholder="Enter svg value"
+							value={value}
+							rows={10}
+							onChange={handleChange}
+							data-gramm={false}
+							allowClear
+						/>
+					</Form.Item>
+				</Form>
+			</Card>
+			<Card>
+				<CodeHighlightWithCopy
+					language="css"
+					codeString={combinedSVG}
+				/>
+			</Card>
+		</PageGrid>
+	);
+};
+
+export default SvgFormatter;
diff --git a/ui/src/pages/CSS/SvgFormatter/utils/helper.ts b/ui/src/pages/CSS/SvgFormatter/utils/helper.ts
new file mode 100644
index 00000000..9be62bc0
--- /dev/null
+++ b/ui/src/pages/CSS/SvgFormatter/utils/helper.ts
@@ -0,0 +1,35 @@
+function combineSVGPaths(svgInput: string): string {
+	try {
+		const parser = new DOMParser();
+		const svgDocument = parser.parseFromString(svgInput, "image/svg+xml");
+
+		const pathElements = svgDocument.querySelectorAll("path");
+
+		if (pathElements.length === 0) {
+			throw new Error("No <path> elements found in the SVG.");
+		}
+
+		const pathDataArray = Array.from(pathElements).map((path) =>
+			path.getAttribute("d")
+		);
+
+		const combinedPathData = pathDataArray.join("\n");
+		const svgElement = svgDocument.querySelector("svg");
+
+		if (svgElement) {
+			svgElement.innerHTML = `<path d="${combinedPathData}" stroke="#F0F" />`;
+		} else {
+			throw new Error("<svg> element not found in the SVG.");
+		}
+
+		const serializer = new XMLSerializer();
+		const combinedSVGString = serializer.serializeToString(svgDocument);
+
+		return combinedSVGString;
+	} catch (error) {
+		console.error(error);
+		return "Error combining SVG paths.";
+	}
+}
+
+export { combineSVGPaths };
diff --git a/ui/src/pages/Data/QRcode/QRcode.module.scss b/ui/src/pages/Data/QRcode/QRcode.module.scss
new file mode 100644
index 00000000..93d21609
--- /dev/null
+++ b/ui/src/pages/Data/QRcode/QRcode.module.scss
@@ -0,0 +1,23 @@
+.qrcode {
+	&__label {
+		display: flex;
+		width: 100vw;
+		justify-content: space-between;
+	}
+
+	&__output {
+		height: 266px;
+		&__result,
+		&__notfound {
+			display: flex;
+			flex-direction: column;
+			align-items: center;
+			justify-content: center;
+		}
+
+		&__notfound {
+			height: 200px;
+			text-align: center;
+		}
+	}
+}
diff --git a/ui/src/pages/Data/QRcode/index.tsx b/ui/src/pages/Data/QRcode/index.tsx
new file mode 100644
index 00000000..f363068f
--- /dev/null
+++ b/ui/src/pages/Data/QRcode/index.tsx
@@ -0,0 +1,74 @@
+import { Button, Card, Form, QRCode, Input, Badge } from "antd";
+import PageGrid from "components/Layouts/PageGrid";
+import React, { useEffect, useState } from "react";
+import { detectQrData, downloadQRCode } from "./utils/helper";
+import Icon from "components/General/Icon";
+import style from "./QRcode.module.scss";
+
+const { TextArea } = Input;
+
+const QRcode: React.FC = () => {
+	const [value, setValue] = useState("Generate QR code ...");
+	const [dataType, setDataType] = useState("");
+
+	useEffect(() => {
+		setDataType(detectQrData(value));
+	}, [value]);
+
+	return (
+		<PageGrid>
+			<Card>
+				<Form layout="vertical">
+					<Form.Item
+						label={
+							<div className={style.qrcode__label}>
+								<p>{`Input data`}</p>
+								<Badge
+									text={`${dataType} detected`}
+									color={
+										dataType === "No data"
+											? "yellow"
+											: "green"
+									}
+								/>
+							</div>
+						}
+					>
+						<TextArea
+							value={value}
+							rows={7}
+							onChange={(e) => setValue(e.target.value)}
+							data-gramm={false}
+							allowClear
+						/>
+					</Form.Item>
+				</Form>
+			</Card>
+			<Card className={style.qrcode__output}>
+				{value.length > 0 ? (
+					<div id="myqrcode" className={style.qrcode__output__result}>
+						<QRCode
+							value={value}
+							bgColor="#fff"
+							style={{ marginBottom: 16 }}
+						/>
+						<Button onClick={downloadQRCode}>Download</Button>
+					</div>
+				) : (
+					<div className={style.qrcode__output__notfound}>
+						<span>
+							<Icon name="AlertTriangle" size={30} />
+						</span>
+
+						<p>
+							There is no data for generating QR code, please
+							provide data first.
+						</p>
+					</div>
+				)}
+			</Card>
+		</PageGrid>
+	);
+};
+
+export default QRcode;
diff --git a/ui/src/pages/Data/QRcode/utils/helper.ts b/ui/src/pages/Data/QRcode/utils/helper.ts
new file mode 100644
index 00000000..a64aac4c
--- /dev/null
+++ b/ui/src/pages/Data/QRcode/utils/helper.ts
@@ -0,0 +1,39 @@
+function isValidUrl(url: string) {
+	const pattern = new RegExp(
+		"^(https?:\\/\\/)?" +
+			"((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.)+[a-z]{2,}|" +
+			"((\\d{1,3}\\.){3}\\d{1,3}))" +
+			"(\\:\\d+)?(\\/[-a-z\\d%_.~+]*)*" +
+			"(\\?[;&a-z\\d%_.~+=-]*)?" +
+			"(\\#[-a-z\\d_]*)?$",
+		"i"
+	);
+	return pattern.test(url);
+}
+
+function detectQrData(data: string) {
+	if (data.length === 0) {
+		return "No data";
+	}
+
+	if (isValidUrl(data)) return "Url";
+
+	return typeof data;
+}
+
+const downloadQRCode = () => {
+	const canvas = document
+		.getElementById("myqrcode")
+		?.querySelector<HTMLCanvasElement>("canvas");
+	if (canvas) {
+		const url = canvas.toDataURL();
+		const a = document.createElement("a");
+		a.download = "QRCode.png";
+		a.href = url;
+		document.body.appendChild(a);
+		a.click();
+		document.body.removeChild(a);
+	}
+};
+
+export { detectQrData, downloadQRCode };
diff --git a/ui/src/pages/Routes/utils/constant.tsx b/ui/src/pages/Routes/utils/constant.tsx
index 9d62f335..c8f31a4e 100644
--- a/ui/src/pages/Routes/utils/constant.tsx
+++ b/ui/src/pages/Routes/utils/constant.tsx
@@ -33,6 +33,8 @@ import {
 	Avatar,
 	PageNotFound,
 	Mimetype,
+	QRcode,
+	SvgFormatter,
 } from "pages/pages";
 
 const routes: Route[] = [
@@ -56,6 +58,11 @@ const routes: Route[] = [
 		title: "Border Shadow",
 		component: BoxShadow,
 	},
+	{
+		path: "/css/svg-formatter",
+		title: "SVG Formatter",
+		component: SvgFormatter,
+	},
 	{
 		path: "/converter/base-64",
 		title: "Base64",
@@ -86,6 +93,11 @@ const routes: Route[] = [
 		title: "Image Generator From Colors",
 		component: ImageGeneratorFromColors,
 	},
+	{
+		path: "/generator/qrcode",
+		title: "QR Code Generator",
+		component: QRcode,
+	},
 	{
 		path: "/generator/sorting",
 		title: "Sorting",
diff --git a/ui/src/pages/info/Mimetype/index.tsx b/ui/src/pages/info/Mimetype/index.tsx
index e0e03ca6..5490cdde 100644
--- a/ui/src/pages/info/Mimetype/index.tsx
+++ b/ui/src/pages/info/Mimetype/index.tsx
@@ -1,13 +1,10 @@
 import React from "react";
-
 import useFetchList from "lib/utils/hooks/useFetchList";
 import MimeSearchResult from "./components/MimeSearchResult";
+import { MIME_KEY, MIME_URL } from "./utils/constants";
 
 const Mimetype: React.FC = () => {
-	const { data, isError, isLoading } = useFetchList(
-		"mime",
-		"/mime/data.json"
-	);
+	const { data, isError, isLoading } = useFetchList(MIME_KEY, MIME_URL);
 
 	return (
 		<MimeSearchResult isError={isError} isLoading={isLoading} data={data} />
diff --git a/ui/src/pages/info/Mimetype/utils/constants.tsx b/ui/src/pages/info/Mimetype/utils/constants.tsx
index 834c6145..f45cfcb1 100644
--- a/ui/src/pages/info/Mimetype/utils/constants.tsx
+++ b/ui/src/pages/info/Mimetype/utils/constants.tsx
@@ -2,7 +2,8 @@ import { ColumnsType } from "antd/es/table";
 import { MimeTableDataType } from "./types";
 import { Tag } from "antd";
 import CodeHighlightWithCopy from "components/General/CodeHighlightWithCopy";
-
+const MIME_URL = "/mime/data.json";
+const MIME_KEY = "mimetype";
 // Column
 const MIME_COLUMNS: ColumnsType<MimeTableDataType> = [
 	{
@@ -43,4 +44,4 @@ const MIME_COLUMNS: ColumnsType<MimeTableDataType> = [
 	},
 ];
 
-export { MIME_COLUMNS };
+export { MIME_COLUMNS, MIME_URL, MIME_KEY };
diff --git a/ui/src/pages/pages.ts b/ui/src/pages/pages.ts
index 2863a761..c29dee4d 100644
--- a/ui/src/pages/pages.ts
+++ b/ui/src/pages/pages.ts
@@ -19,6 +19,8 @@ const ImageGeneratorFromColors = lazy(
 	() => import("pages/Data/ImageGeneratorFromColors")
 );
 const Sorting = lazy(() => import("pages/Data/Sorting"));
+const QRcode = lazy(() => import("pages/Data/QRcode"));
+const SvgFormatter = lazy(() => import("pages/CSS/SvgFormatter"));
 
 const Blog = lazy(() => import("pages/List/Blog"));
 const Book = lazy(() => import("pages/List/Book"));
@@ -62,6 +64,7 @@ export {
 	Icon,
 	ImageGeneratorFromColors,
 	Avatar,
+	QRcode,
 	JsonToTypescript,
 	MarkdownEditor,
 	Movie,
@@ -79,5 +82,6 @@ export {
 	UiUx,
 	YouTube,
 	Mimetype,
+	SvgFormatter,
 	PageNotFound,
 };

From 422a7c8c1fb6a316e2f72483d9d2ca6950e2b429 Mon Sep 17 00:00:00 2001
From: ashik-75 <ashikex49@gmail.com>
Date: Tue, 12 Sep 2023 17:08:11 +0600
Subject: [PATCH 2/3] update detection function | extend to mixed type
 detection

---
 ui/src/pages/Data/QRcode/utils/helper.ts | 22 ++++++++++++++++++++--
 1 file changed, 20 insertions(+), 2 deletions(-)

diff --git a/ui/src/pages/Data/QRcode/utils/helper.ts b/ui/src/pages/Data/QRcode/utils/helper.ts
index a64aac4c..10005e8c 100644
--- a/ui/src/pages/Data/QRcode/utils/helper.ts
+++ b/ui/src/pages/Data/QRcode/utils/helper.ts
@@ -11,14 +11,32 @@ function isValidUrl(url: string) {
 	return pattern.test(url);
 }
 
+const isNumberArray = (data: string[]): boolean => {
+	return data.every((value) => /^\d+(\.\d+)?$/.test(value));
+};
+const isStringArray = (data: any[]): boolean => {
+	return data.every((value) => !/^\d+(\.\d+)?$/.test(value));
+};
+
+const formatData = (data: string): string[] => {
+	const delimitersRegex = /[,\s\n]+/;
+	return data.split(delimitersRegex).filter((entry) => entry.length > 0);
+};
+
 function detectQrData(data: string) {
-	if (data.length === 0) {
+	const formattedStringArray = formatData(data);
+
+	if (formattedStringArray.length === 0) {
 		return "No data";
 	}
 
 	if (isValidUrl(data)) return "Url";
 
-	return typeof data;
+	if (isNumberArray(formattedStringArray)) return "Number";
+
+	if (isStringArray(formattedStringArray)) return "String";
+
+	return "Mixed value";
 }
 
 const downloadQRCode = () => {

From 7990365044cc037111dca175874b8e2fe392ef28 Mon Sep 17 00:00:00 2001
From: ashik-75 <ashikex49@gmail.com>
Date: Wed, 13 Sep 2023 16:12:15 +0600
Subject: [PATCH 3/3] fix some issue in avatar & QR code and fix UI bugs

---
 ui/package.json                             |  4 ++-
 ui/src/pages/About/utils/constants.tsx      | 19 +++++++++++
 ui/src/pages/CSS/BorderRadius/index.tsx     |  6 ++--
 ui/src/pages/CSS/SvgFormatter/index.tsx     | 19 ++++++-----
 ui/src/pages/Colors/ColorPicker/index.tsx   | 11 ++++---
 ui/src/pages/Data/Avatar/index.tsx          | 35 ++++++++++++++++-----
 ui/src/pages/Data/Avatar/utils/constants.ts | 24 +++++++++++++-
 ui/src/pages/Data/QRcode/utils/helper.ts    |  2 +-
 ui/yarn.lock                                | 16 ++++++++++
 9 files changed, 110 insertions(+), 26 deletions(-)

diff --git a/ui/package.json b/ui/package.json
index 8af9e3fe..00c5a26f 100644
--- a/ui/package.json
+++ b/ui/package.json
@@ -39,7 +39,8 @@
 		"tinycolor2": "^1.6.0",
 		"tinymce": "^6.6.2",
 		"values.js": "^2.1.1",
-		"web-vitals": "^3.3.1"
+		"web-vitals": "^3.3.1",
+		"webfontloader": "^1.6.28"
 	},
 	"scripts": {
 		"dev": "vite",
@@ -79,6 +80,7 @@
 		"@types/react": "^18.2.15",
 		"@types/react-dom": "^18.2.7",
 		"@types/react-syntax-highlighter": "^15.5.7",
+		"@types/webfontloader": "^1.6.35",
 		"@typescript-eslint/eslint-plugin": "^6.0.0",
 		"@typescript-eslint/parser": "^6.2.1",
 		"@vitejs/plugin-react": "^4.0.3",
diff --git a/ui/src/pages/About/utils/constants.tsx b/ui/src/pages/About/utils/constants.tsx
index aeda15bc..d9d64d59 100644
--- a/ui/src/pages/About/utils/constants.tsx
+++ b/ui/src/pages/About/utils/constants.tsx
@@ -68,6 +68,7 @@ const LIBRARY_URLS: LibraryList = {
 		"https://www.npmjs.com/package/@uiw/react-md-editor",
 	tinymce: "https://www.npmjs.com/package/@tinymce/tinymce-react",
 	"values.js": "https://www.npmjs.com/package/values.js",
+	webfontloader: "https://www.npmjs.com/package/webfontloader",
 };
 
 const API_COLUMNS: ColumnsType<Api> = [
@@ -189,6 +190,13 @@ const FEATURE_DATA: Feature[] = [
 		link: "/css/br",
 		library: [{ name: "faker.js", url: LIBRARY_URLS["faker-js"] }],
 	},
+	{
+		key: "3",
+		name: "SVG Formatter",
+		description: "Merge svg path",
+		link: "/css/svg-formatter",
+		library: [{ name: "Vanilla JS", url: "" }],
+	},
 	{
 		key: "4",
 		name: "Base 64 Converter",
@@ -265,8 +273,19 @@ const FEATURE_DATA: Feature[] = [
 				name: "html-to-image",
 				url: LIBRARY_URLS["html-to-image"],
 			},
+			{
+				name: "webfontloader",
+				url: LIBRARY_URLS["webfontloader"],
+			},
 		],
 	},
+	{
+		key: "17",
+		name: "QR code generator",
+		description: "Generate QR code from text",
+		link: "/generator/qrcode",
+		library: [],
+	},
 	{
 		key: "10",
 		name: "Sorting",
diff --git a/ui/src/pages/CSS/BorderRadius/index.tsx b/ui/src/pages/CSS/BorderRadius/index.tsx
index 1a972a2b..28bfc7fb 100644
--- a/ui/src/pages/CSS/BorderRadius/index.tsx
+++ b/ui/src/pages/CSS/BorderRadius/index.tsx
@@ -47,7 +47,7 @@ const BorderRadius = () => {
 	};
 
 	return (
-		<Space direction="vertical">
+		<>
 			<PageGrid className={style.br}>
 				<Card className={style.br__input}>
 					<Form layout="vertical">
@@ -206,13 +206,13 @@ const BorderRadius = () => {
 					</Space>
 				</Card>
 			</PageGrid>
-			<Card>
+			<Card style={{ marginTop: "20px" }}>
 				<CodeHighlightWithCopy
 					codeString={generateCSSCodeString()}
 					language="css"
 				/>
 			</Card>
-		</Space>
+		</>
 	);
 };
 
diff --git a/ui/src/pages/CSS/SvgFormatter/index.tsx b/ui/src/pages/CSS/SvgFormatter/index.tsx
index 9cda991e..d163ec6c 100644
--- a/ui/src/pages/CSS/SvgFormatter/index.tsx
+++ b/ui/src/pages/CSS/SvgFormatter/index.tsx
@@ -8,14 +8,14 @@ const { TextArea } = Input;
 
 const SvgFormatter: React.FC = () => {
 	const [value, setValue] = useState("");
-	const [combinedSVG, setCombinedSVG] = useState<string>("");
+	const [outputSVG, setOutputSVG] = useState<string>("");
 
 	const handleChange = (e: ChangeEvent<HTMLTextAreaElement>) => {
 		const newValue = e.target.value;
 		setValue(newValue);
 
 		const combinedSvgOutput = combineSVGPaths(newValue);
-		setCombinedSVG(combinedSvgOutput);
+		setOutputSVG(combinedSvgOutput);
 	};
 	return (
 		<PageGrid>
@@ -33,12 +33,15 @@ const SvgFormatter: React.FC = () => {
 					</Form.Item>
 				</Form>
 			</Card>
-			<Card>
-				<CodeHighlightWithCopy
-					language="css"
-					codeString={combinedSVG}
-				/>
-			</Card>
+
+			{outputSVG && (
+				<Card>
+					<CodeHighlightWithCopy
+						language="css"
+						codeString={outputSVG}
+					/>
+				</Card>
+			)}
 		</PageGrid>
 	);
 };
diff --git a/ui/src/pages/Colors/ColorPicker/index.tsx b/ui/src/pages/Colors/ColorPicker/index.tsx
index f098e344..185c7676 100644
--- a/ui/src/pages/Colors/ColorPicker/index.tsx
+++ b/ui/src/pages/Colors/ColorPicker/index.tsx
@@ -55,11 +55,12 @@ const ColorPicker: React.FC = () => {
 								clipboardComponent={ClipboardButton}
 							/>
 						</CopyInput>
-
-						<ColorFormatTags
-							currentFormat={format}
-							onSelect={setFormat}
-						/>
+						<Form.Item label="Color format">
+							<ColorFormatTags
+								currentFormat={format}
+								onSelect={setFormat}
+							/>
+						</Form.Item>
 
 						<CP
 							format={format}
diff --git a/ui/src/pages/Data/Avatar/index.tsx b/ui/src/pages/Data/Avatar/index.tsx
index 44a764c0..210bf171 100644
--- a/ui/src/pages/Data/Avatar/index.tsx
+++ b/ui/src/pages/Data/Avatar/index.tsx
@@ -2,10 +2,12 @@ import { saveAs } from "file-saver";
 import { toPng } from "html-to-image";
 import { Card, Form, Slider, Avatar as AntAvatar, Space } from "antd";
 import ColorPickerWithInput from "components/General/ColorPickerWithInput";
+import WebFont from "webfontloader";
 import {
 	ResponsiveButton,
 	ResponsiveInputWithLabel,
 	ResponsiveSegementWithLabel,
+	ResponsiveSelectWithLabel,
 } from "components/General/FormComponents";
 import PageGrid from "components/Layouts/PageGrid";
 import { useRef, useState } from "react";
@@ -13,12 +15,14 @@ import {
 	AVATAR_SHAPE_SEGMENTED_OPTIONS,
 	AvatarShape,
 	AvatarShapeType,
+	FONTS,
 } from "./utils/constants";
 import InputGrid from "components/Layouts/InputGrid";
 import style from "./Avatar.module.scss";
 
 const Avatar = () => {
 	const [text, setText] = useState<string>("BT");
+	const [avatarFont, setAvatarFont] = useState(FONTS[0].value);
 	const [textColor, setTextColor] = useState<string>(
 		"rgba(255, 255, 255, 1)"
 	);
@@ -41,6 +45,12 @@ const Avatar = () => {
 		saveAs(blob, `image-${Date.now()}.png`);
 	};
 
+	// Load the selected font when it changes
+	WebFont.load({
+		google: {
+			families: [avatarFont],
+		},
+	});
 	return (
 		<PageGrid>
 			<Card>
@@ -69,12 +79,13 @@ const Avatar = () => {
 					</InputGrid>
 
 					<InputGrid>
-						<ResponsiveInputWithLabel
-							label="Avatar size"
-							placeholder="Enter avatar size"
-							value={avatarSize}
-							onChange={(val) => setAvatarSize(val || 0)}
-							type="number"
+						<ResponsiveSelectWithLabel
+							label="Font family"
+							value={avatarFont}
+							options={FONTS}
+							onSelect={(_, info) => {
+								setAvatarFont(info.value);
+							}}
 						/>
 
 						<ResponsiveInputWithLabel
@@ -87,6 +98,13 @@ const Avatar = () => {
 					</InputGrid>
 
 					<InputGrid>
+						<ResponsiveInputWithLabel
+							label="Avatar size"
+							placeholder="Enter avatar size"
+							value={avatarSize}
+							onChange={(val) => setAvatarSize(val || 0)}
+							type="number"
+						/>
 						<ResponsiveSegementWithLabel
 							value={shapeType}
 							label="Avatar shape"
@@ -97,6 +115,8 @@ const Avatar = () => {
 								}
 							}}
 						/>
+					</InputGrid>
+					<div>
 						{shapeType === AvatarShape.Custom && (
 							<Form.Item label="Avatar border radius">
 								<Slider
@@ -109,7 +129,7 @@ const Avatar = () => {
 								/>
 							</Form.Item>
 						)}
-					</InputGrid>
+					</div>
 				</Form>
 			</Card>
 
@@ -127,6 +147,7 @@ const Avatar = () => {
 									? `${customBorderRadius}px`
 									: "",
 							fontSize,
+							fontFamily: avatarFont,
 						}}
 					>
 						{text}
diff --git a/ui/src/pages/Data/Avatar/utils/constants.ts b/ui/src/pages/Data/Avatar/utils/constants.ts
index 30809b1e..ee869c07 100644
--- a/ui/src/pages/Data/Avatar/utils/constants.ts
+++ b/ui/src/pages/Data/Avatar/utils/constants.ts
@@ -12,6 +12,28 @@ const AVATAR_SHAPE_SEGMENTED_OPTIONS = [
 	{ label: "Custom", value: AvatarShape.Custom },
 ];
 
+const FONTS = [
+	{ value: "Open Sans", label: "Open Sans" },
+	{ value: "Roboto", label: "Roboto" },
+	{ value: "Lato", label: "Lato" },
+	{ value: "Source Sans Pro", label: "Source Sans Pro" },
+	{ value: "Nunito Sans", label: "Nunito Sans" },
+	{ value: "Poppins", label: "Poppins" },
+	{ value: "Montserrat", label: "Montserrat" },
+	{ value: "Raleway", label: "Raleway" },
+	{ value: "Oswald", label: "Oswald" },
+	{ value: "Merriweather", label: "Merriweather" },
+	{ value: "Playfair Display", label: "Playfair Display" },
+	{ value: "Dancing Script", label: "Dancing Script" },
+	{ value: "Cormorant Garamond", label: "Cormorant Garamond" },
+	{ value: "Fira Sans", label: "Fira Sans" },
+	{ value: "Karla", label: "Karla" },
+	{ value: "Ubuntu", label: "Ubuntu" },
+	{ value: "Inconsolata", label: "Inconsolata" },
+	{ value: "PT Sans", label: "PT Sans" },
+	{ value: "Quicksand", label: "Quicksand" },
+];
+
 export type { AvatarShapeType };
 
-export { AVATAR_SHAPE_SEGMENTED_OPTIONS, AvatarShape };
+export { AVATAR_SHAPE_SEGMENTED_OPTIONS, AvatarShape, FONTS };
diff --git a/ui/src/pages/Data/QRcode/utils/helper.ts b/ui/src/pages/Data/QRcode/utils/helper.ts
index 10005e8c..6264dcda 100644
--- a/ui/src/pages/Data/QRcode/utils/helper.ts
+++ b/ui/src/pages/Data/QRcode/utils/helper.ts
@@ -14,7 +14,7 @@ function isValidUrl(url: string) {
 const isNumberArray = (data: string[]): boolean => {
 	return data.every((value) => /^\d+(\.\d+)?$/.test(value));
 };
-const isStringArray = (data: any[]): boolean => {
+const isStringArray = (data: string[]): boolean => {
 	return data.every((value) => !/^\d+(\.\d+)?$/.test(value));
 };
 
diff --git a/ui/yarn.lock b/ui/yarn.lock
index 334e4fed..907993a3 100644
--- a/ui/yarn.lock
+++ b/ui/yarn.lock
@@ -2507,6 +2507,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/webfontloader@npm:^1.6.35":
+  version: 1.6.35
+  resolution: "@types/webfontloader@npm:1.6.35"
+  checksum: 8a809e1f8041fc9f7ec1df82d6e841bfc51732a3aa0b56a4e3d2abab86a8abce1b0db90dc9d2c594fd0d77034e2670cae3cfb714a902a0112985fa04fd4a61c8
+  languageName: node
+  linkType: hard
+
 "@types/yargs-parser@npm:*":
   version: 21.0.0
   resolution: "@types/yargs-parser@npm:21.0.0"
@@ -3655,6 +3662,7 @@ __metadata:
     "@types/react-dom": ^18.2.7
     "@types/react-router-dom": ^5.3.3
     "@types/react-syntax-highlighter": ^15.5.7
+    "@types/webfontloader": ^1.6.35
     "@typescript-eslint/eslint-plugin": ^6.0.0
     "@typescript-eslint/parser": ^6.2.1
     "@uiw/react-markdown-editor": ^5.11.2
@@ -3694,6 +3702,7 @@ __metadata:
     vite-tsconfig-paths: ^4.2.0
     vitest: ^0.34.1
     web-vitals: ^3.3.1
+    webfontloader: ^1.6.28
   languageName: unknown
   linkType: soft
 
@@ -10891,6 +10900,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"webfontloader@npm:^1.6.28":
+  version: 1.6.28
+  resolution: "webfontloader@npm:1.6.28"
+  checksum: cbebbe593cb0d27dbb4d418f7f96bd9893024f1f2062e858af76209b6524e25d766964b6e2a724f3b694fadef661dd3a01065455a96df05337b3281ca09ab656
+  languageName: node
+  linkType: hard
+
 "webidl-conversions@npm:^3.0.0":
   version: 3.0.1
   resolution: "webidl-conversions@npm:3.0.1"