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/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/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 = [ @@ -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 ( - + <>
@@ -206,13 +206,13 @@ const BorderRadius = () => { - + - + ); }; diff --git a/ui/src/pages/CSS/SvgFormatter/index.tsx b/ui/src/pages/CSS/SvgFormatter/index.tsx new file mode 100644 index 00000000..d163ec6c --- /dev/null +++ b/ui/src/pages/CSS/SvgFormatter/index.tsx @@ -0,0 +1,49 @@ +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 [outputSVG, setOutputSVG] = useState(""); + + const handleChange = (e: ChangeEvent) => { + const newValue = e.target.value; + setValue(newValue); + + const combinedSvgOutput = combineSVGPaths(newValue); + setOutputSVG(combinedSvgOutput); + }; + return ( + + + + +