@@ -62,7 +63,15 @@ const ColorPicker: React.FC = () => {
+ setSearchParams(
+ (prev) => {
+ prev.set("format", format);
+ return prev;
+ },
+ { replace: true }
+ )
+ }
/>
diff --git a/ui/src/pages/Colors/ShadesAndTints/utils/helper.ts b/ui/src/pages/Colors/ShadesAndTints/utils/helper.ts
index 3b6925aa..7bc899e5 100644
--- a/ui/src/pages/Colors/ShadesAndTints/utils/helper.ts
+++ b/ui/src/pages/Colors/ShadesAndTints/utils/helper.ts
@@ -13,17 +13,21 @@ const generateShadesForColor = (
selectedColor: string,
count: number
): { shades: string[]; tints: string[] } => {
- if (!selectedColor || !count || count <= 0)
- return { shades: [], tints: [] };
+ try {
+ if (!selectedColor || !count || count <= 0)
+ return { shades: [], tints: [] };
- const values = new Values(selectedColor);
- const shadesArray = values.shades(count);
- const tintsArray = values.tints(count);
+ const values = new Values(selectedColor);
+ const shadesArray = values.shades(count);
+ const tintsArray = values.tints(count);
- const shades = shadesArray.map((shade) => "#" + shade.hex);
- const tints = tintsArray.map((tint) => "#" + tint.hex);
+ const shades = shadesArray.map((shade) => "#" + shade.hex);
+ const tints = tintsArray.map((tint) => "#" + tint.hex);
- return { shades, tints };
+ return { shades, tints };
+ } catch (err) {
+ return { shades: [], tints: [] };
+ }
};
const generateRandomColor = () => {
diff --git a/ui/src/pages/Home/Home.module.scss b/ui/src/pages/Home/Home.module.scss
index 2e9b5f21..2f8cc324 100644
--- a/ui/src/pages/Home/Home.module.scss
+++ b/ui/src/pages/Home/Home.module.scss
@@ -1,6 +1,64 @@
.home {
- display: flex;
- align-items: center;
- justify-content: center;
- height: var(--bt-full-page-height);
+ background-color: #e6e6ff;
+ padding-left: 10px;
+ padding-right: 10px;
+ &__content {
+ padding-top: 80px;
+ padding-left: 200px;
+ padding-right: 200px;
+ display: flex;
+ flex-direction: column;
+
+ gap: 50px;
+
+ &_header {
+ display: flex;
+ flex-direction: row;
+
+ &_text {
+ display: flex;
+ flex-direction: column;
+ gap: 30px;
+ }
+ }
+
+ &_values,
+ &_features {
+ align-items: center;
+ display: flex;
+ flex-direction: column;
+ gap: 20px;
+ }
+
+ &_values {
+ &_value {
+ display: grid;
+ gap: 20px;
+ grid-template-columns: 1fr 1fr 1fr;
+ }
+ }
+
+ &_features {
+ &_select {
+ display: flex;
+ flex-direction: column;
+ gap: 20px;
+ }
+ }
+
+ &_footer {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ &_content {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ gap: 10px;
+ padding-left: 100px;
+ padding-right: 100px;
+ }
+ }
+ }
}
diff --git a/ui/src/pages/Home/index.tsx b/ui/src/pages/Home/index.tsx
index 1c699871..ab0ee6e7 100644
--- a/ui/src/pages/Home/index.tsx
+++ b/ui/src/pages/Home/index.tsx
@@ -1,10 +1,155 @@
import Text from "components/General/Text/Text";
import style from "./Home.module.scss";
+import { Card, Typography, Image, Space } from "antd";
+import header from "assets/home/header.svg";
+import share from "assets/home/share.svg";
+import verification from "assets/home/verification.svg";
+import detection from "assets/home/detection.svg";
+import { APP_VALUES, FEATURE_DATA } from "pages/About/utils/constants";
+import {
+ ResponsiveButton,
+ ResponsiveSegementWithLabel,
+} from "components/General/FormComponents";
+import Footer from "components/Layouts/Footer";
+import PageGrid from "components/Layouts/PageGrid";
+import { SEGMENTED_OPTIONS, DESCRIPTIONS } from "./utils/constants";
+import { useState } from "react";
+
+const onClick = (url: string) => {
+ window.open(url, "_blank", "noopener");
+};
const Home = () => {
+ const [feature, setFeature] = useState(SEGMENTED_OPTIONS[0].value);
+
return (
-
+
+
+
+
+
+ At binarytree.dev, we provide an array of developer
+ productivity tools designed to help you save time.
+ With an{" "}
+
+ ever-growing number of features
+ {" "}
+ (currently {FEATURE_DATA.length}), our
+ platform is constantly evolving to meet the needs of
+ developers like you.
+
+
+
+
+
+
+
+ {
+ setFeature(value as string);
+ }}
+ />
+ {DESCRIPTIONS[feature].description}
+ More
+
+
+
+
+
+
+
+
+
}
+ >
+ {APP_VALUES[0]}
+
+
+ }
+ >
+ {APP_VALUES[1]}
+
+
+ }
+ >
+ {APP_VALUES[2]}
+
+
+
+
+ }
+ >
+
+
+ Embrace the efficiency that binarytree.dev
+ brings to your development process. Our tools
+ are designed to eliminate unnecessary
+ complexities, allowing you to streamline your
+ work and direct your focus towards the core of
+ your projects. With binarytree.dev, you're not
+ just coding faster - you're crafting with
+ precision and focusing on what truly matters.
+ Discover a smoother, smarter way to develop
+ today.
+
+
+ onClick("converter/base-64")}
+ >
+ Base64 converter
+
+
+ onClick(
+ "https://github.com/lifeparticle/binarytree/issues"
+ )
+ }
+ >
+ Request Features
+
+
+
+
+
+
+
);
};
diff --git a/ui/src/pages/Home/utils/constants.ts b/ui/src/pages/Home/utils/constants.ts
new file mode 100644
index 00000000..5d0d62bd
--- /dev/null
+++ b/ui/src/pages/Home/utils/constants.ts
@@ -0,0 +1,37 @@
+import { FEATURE_DATA } from "pages/About/utils/constants";
+import base64 from "assets/home/avatar.gif";
+
+interface DescriptionType {
+ description: string;
+ image: string;
+}
+
+const VALUES = ["avatar", "shadesandtints", "toc"];
+
+const LABELS: Record
= {
+ avatar: "Base64",
+ shadesandtints: "Shades & Tints",
+ toc: "Table of Content",
+};
+
+const IMAGES: Record = {
+ base64,
+ shadesandtints: base64,
+ toc: base64,
+};
+
+const DESCRIPTIONS: Record = {
+ avatar: { description: FEATURE_DATA[10].description, image: IMAGES.base64 },
+ shadesandtints: {
+ description: FEATURE_DATA[2].description,
+ image: IMAGES.shadesandtints,
+ },
+ toc: { description: FEATURE_DATA[16].description, image: IMAGES.toc },
+};
+
+const SEGMENTED_OPTIONS = VALUES.map((value) => ({
+ label: LABELS[value],
+ value,
+}));
+
+export { SEGMENTED_OPTIONS, DESCRIPTIONS };
diff --git a/ui/src/pages/Routes/utils/constant.tsx b/ui/src/pages/Routes/utils/constant.tsx
index a7131559..f5d289b5 100644
--- a/ui/src/pages/Routes/utils/constant.tsx
+++ b/ui/src/pages/Routes/utils/constant.tsx
@@ -1,4 +1,5 @@
-import { Route } from "./types";
+import Diagramming from "pages/Tools/Diagramming";
+import { Route, RouteId } from "./types";
import {
About,
Avatar,
@@ -265,17 +266,26 @@ export const routes: Route[] = [
description: "Find out what type your file fancies itself as.",
component: Mimetype,
},
+ {
+ id: "diagramming",
+ path: "/tools/diagramming",
+ title: "Diagramming",
+ description:
+ "Channel your inner Da Vinci of diagrams. Who said flowcharts can't be art?",
+ component: Diagramming,
+ },
{
id: "diffchecker",
path: "/tools/textdiff",
title: "Diffchecker",
- description: "Find out the difference between text",
+ description:
+ "Ever wondered what’s different? We did too! Play spot the difference with text.",
component: Diffchecker,
},
{
id: "/",
path: "/",
- title: "",
+ title: "Home",
description: "",
component: Home,
},
@@ -301,3 +311,8 @@ export const routes: Route[] = [
component: PageNotFound,
},
];
+
+export const routesById = routes.reduce((acc, route) => {
+ acc[route.id] = route;
+ return acc;
+}, {} as Record);
diff --git a/ui/src/pages/Routes/utils/types.ts b/ui/src/pages/Routes/utils/types.ts
index 13598c2f..aa9227c2 100644
--- a/ui/src/pages/Routes/utils/types.ts
+++ b/ui/src/pages/Routes/utils/types.ts
@@ -32,6 +32,7 @@ type RouteId =
| "texteditor"
| "mimetype"
| "diffchecker"
+ | "diagramming"
| "/"
| "about"
| "feedback"
diff --git a/ui/src/pages/Tools/Diagramming/diagramming.module.scss b/ui/src/pages/Tools/Diagramming/diagramming.module.scss
new file mode 100644
index 00000000..f92eed7a
--- /dev/null
+++ b/ui/src/pages/Tools/Diagramming/diagramming.module.scss
@@ -0,0 +1,3 @@
+.diagramming {
+ height: calc(100dvh - 110px);
+}
diff --git a/ui/src/pages/Tools/Diagramming/index.tsx b/ui/src/pages/Tools/Diagramming/index.tsx
new file mode 100644
index 00000000..bbc504e3
--- /dev/null
+++ b/ui/src/pages/Tools/Diagramming/index.tsx
@@ -0,0 +1,12 @@
+import { Excalidraw } from "@excalidraw/excalidraw";
+import style from "./diagramming.module.scss";
+
+const Diagramming = () => {
+ return (
+
+
+
+ );
+};
+
+export default Diagramming;
diff --git a/ui/src/pages/Tools/Diffchecker/index.tsx b/ui/src/pages/Tools/Diffchecker/index.tsx
index 4983287e..4157b36a 100644
--- a/ui/src/pages/Tools/Diffchecker/index.tsx
+++ b/ui/src/pages/Tools/Diffchecker/index.tsx
@@ -1,7 +1,6 @@
import { Card, Form, Input } from "antd";
import PageGrid from "components/Layouts/PageGrid";
import React, { useState } from "react";
-
import { diffChars, Change } from "diff";
import { ResponsiveButton } from "components/General/FormComponents";
import style from "./Diffchecker.module.scss";
diff --git a/ui/src/pages/Data/Sorting/Sorting.module.scss b/ui/src/pages/Tools/Sorting/Sorting.module.scss
similarity index 100%
rename from ui/src/pages/Data/Sorting/Sorting.module.scss
rename to ui/src/pages/Tools/Sorting/Sorting.module.scss
diff --git a/ui/src/pages/Data/Sorting/index.tsx b/ui/src/pages/Tools/Sorting/index.tsx
similarity index 100%
rename from ui/src/pages/Data/Sorting/index.tsx
rename to ui/src/pages/Tools/Sorting/index.tsx
diff --git a/ui/src/pages/Data/Sorting/tests/sorting.test.tsx b/ui/src/pages/Tools/Sorting/tests/sorting.test.tsx
similarity index 92%
rename from ui/src/pages/Data/Sorting/tests/sorting.test.tsx
rename to ui/src/pages/Tools/Sorting/tests/sorting.test.tsx
index 055f759e..98660fe2 100644
--- a/ui/src/pages/Data/Sorting/tests/sorting.test.tsx
+++ b/ui/src/pages/Tools/Sorting/tests/sorting.test.tsx
@@ -1,6 +1,6 @@
import { render, screen } from "@testing-library/react";
import { describe, expect } from "vitest";
-import Sorting from "pages/Data/Sorting";
+import Sorting from "pages/Tools/Sorting";
describe("Sorting", () => {
test("render sorting component without crash", () => {
diff --git a/ui/src/pages/Data/Sorting/utils/constants.ts b/ui/src/pages/Tools/Sorting/utils/constants.ts
similarity index 100%
rename from ui/src/pages/Data/Sorting/utils/constants.ts
rename to ui/src/pages/Tools/Sorting/utils/constants.ts
diff --git a/ui/src/pages/Data/Sorting/utils/helper.ts b/ui/src/pages/Tools/Sorting/utils/helper.ts
similarity index 100%
rename from ui/src/pages/Data/Sorting/utils/helper.ts
rename to ui/src/pages/Tools/Sorting/utils/helper.ts
diff --git a/ui/src/pages/CSS/SvgFormatter/SvgFormatter.module.scss b/ui/src/pages/Tools/SvgFormatter/SvgFormatter.module.scss
similarity index 100%
rename from ui/src/pages/CSS/SvgFormatter/SvgFormatter.module.scss
rename to ui/src/pages/Tools/SvgFormatter/SvgFormatter.module.scss
diff --git a/ui/src/pages/CSS/SvgFormatter/index.tsx b/ui/src/pages/Tools/SvgFormatter/index.tsx
similarity index 100%
rename from ui/src/pages/CSS/SvgFormatter/index.tsx
rename to ui/src/pages/Tools/SvgFormatter/index.tsx
diff --git a/ui/src/pages/CSS/SvgFormatter/utils/helper.ts b/ui/src/pages/Tools/SvgFormatter/utils/helper.ts
similarity index 100%
rename from ui/src/pages/CSS/SvgFormatter/utils/helper.ts
rename to ui/src/pages/Tools/SvgFormatter/utils/helper.ts
diff --git a/ui/src/pages/pages.ts b/ui/src/pages/pages.ts
index 56dfc1cb..29fc60ab 100644
--- a/ui/src/pages/pages.ts
+++ b/ui/src/pages/pages.ts
@@ -11,7 +11,6 @@ const ShadesAndTints = lazy(() => import("pages/Colors/ShadesAndTints"));
const BorderRadius = lazy(() => import("pages/CSS/BorderRadius"));
const BoxShadow = lazy(() => import("pages/CSS/BoxShadow"));
-const SvgFormatter = lazy(() => import("pages/CSS/SvgFormatter"));
const Base64 = lazy(() => import("pages/Converter/Base64"));
const Pixel = lazy(() => import("pages/Converter/Pixel"));
@@ -23,7 +22,6 @@ const ImageGeneratorFromColors = lazy(
);
const Avatar = lazy(() => import("pages/Data/Avatar"));
const QRcode = lazy(() => import("pages/Data/QRcode"));
-const Sorting = lazy(() => import("pages/Data/Sorting"));
const Blog = lazy(() => import("pages/Resource/Blog"));
const Book = lazy(() => import("pages/Resource/Book"));
@@ -43,10 +41,14 @@ const MarkdownEditor = lazy(() => import("pages/Markdown/MarkdownEditor"));
const TableGenerator = lazy(() => import("pages/Markdown/MdTableGenerator"));
const TableOfContent = lazy(() => import("pages/Markdown/TableOfContent"));
+const Diagramming = lazy(() => import("pages/Tools/Diagramming"));
+const Diffchecker = lazy(() => import("pages/Tools/Diffchecker"));
+const Sorting = lazy(() => import("pages/Tools/Sorting"));
+const SvgFormatter = lazy(() => import("pages/Tools/SvgFormatter"));
+
const TextEditor = lazy(() => import("pages/Text/TextEditor"));
const Mimetype = lazy(() => import("pages/Information/Mimetype"));
-const Diffchecker = lazy(() => import("pages/Tools/Diffchecker"));
export {
About,
@@ -60,6 +62,8 @@ export {
Course,
DataGenerator,
DesignSystem,
+ Diagramming,
+ Diffchecker,
Feedback,
Github,
Home,
@@ -85,5 +89,4 @@ export {
TvSeries,
UiUx,
YouTube,
- Diffchecker,
};
diff --git a/ui/yarn.lock b/ui/yarn.lock
index 59f898e6..958a90d6 100644
--- a/ui/yarn.lock
+++ b/ui/yarn.lock
@@ -708,6 +708,16 @@ __metadata:
languageName: node
linkType: hard
+"@excalidraw/excalidraw@npm:^0.16.0":
+ version: 0.16.0
+ resolution: "@excalidraw/excalidraw@npm:0.16.0"
+ peerDependencies:
+ react: ^17.0.2 || ^18.2.0
+ react-dom: ^17.0.2 || ^18.2.0
+ checksum: b3d321a802b7b5b86f65f2036cab59759904589cab131e6c2cf547d138f28b821d1aada3e4ec7c3d37bb37de45250231cd367b29f053f2ede1b6379d562368a5
+ languageName: node
+ linkType: hard
+
"@faker-js/faker@npm:^7.6.0":
version: 7.6.0
resolution: "@faker-js/faker@npm:7.6.0"
@@ -3071,6 +3081,7 @@ __metadata:
resolution: "code@workspace:."
dependencies:
"@emotion/react": ^11.11.0
+ "@excalidraw/excalidraw": ^0.16.0
"@faker-js/faker": ^7.6.0
"@mantine/core": ^6.0.10
"@mantine/ds": ^6.0.10
@@ -3114,7 +3125,7 @@ __metadata:
jspdf: ^2.5.1
jszip: ^3.10.1
jszip-utils: ^0.1.0
- lucide-react: ^0.260.0
+ lucide-react: ^0.262.0
marked: ^7.0.1
react: ^18.2.0
react-dom: ^18.2.0
@@ -6038,12 +6049,12 @@ __metadata:
languageName: node
linkType: hard
-"lucide-react@npm:^0.260.0":
- version: 0.260.0
- resolution: "lucide-react@npm:0.260.0"
+"lucide-react@npm:^0.262.0":
+ version: 0.262.0
+ resolution: "lucide-react@npm:0.262.0"
peerDependencies:
react: ^16.5.1 || ^17.0.0 || ^18.0.0
- checksum: 27e1b44ed859988a939e750ddaf0d6f1a652b87cd104314c62ec7ee26b92cfc037b9d402ce8468a7c8b3883e174a85dedb18be39ec7cddd9d215b58512ff2dc7
+ checksum: ff64ced6f67de2674b41d775f7fd216d2bcf952a9c133a32e8838a349f2726deeb52885f6ecb221e12884ad12565b0516c2557712bf8800c88eb2f7e12182c4b
languageName: node
linkType: hard