diff --git a/packages/ui/src/components/loader/index.ts b/packages/ui/src/components/loader/index.ts
new file mode 100644
index 00000000..537ea6ba
--- /dev/null
+++ b/packages/ui/src/components/loader/index.ts
@@ -0,0 +1 @@
+export { default } from "./loader";
diff --git a/packages/ui/src/components/loader/loader.test.tsx b/packages/ui/src/components/loader/loader.test.tsx
new file mode 100644
index 00000000..d328767c
--- /dev/null
+++ b/packages/ui/src/components/loader/loader.test.tsx
@@ -0,0 +1,23 @@
+import { render, screen } from "@testing-library/react";
+import Loader from "./loader";
+
+// Test case for basic rendering and text
+test("Renders the Loader component correctly", () => {
+ render();
+ const loader = screen.getByTestId("loader");
+ expect(loader).toBeInTheDocument();
+ expect(loader).toHaveTextContent("Loading...");
+});
+
+// Test case for styling props
+test("Renders loader with custom background color", () => {
+ render();
+ const loader = screen.getByTestId("loader");
+ expect(loader).toHaveStyle({ backgroundColor: "rgb(245 158 11)" });
+});
+
+test("Renders loader with custom height", () => {
+ render();
+ const loader = screen.getByTestId("loader");
+ expect(loader).toHaveClass("h-40");
+});
diff --git a/packages/ui/src/components/loader/loader.tsx b/packages/ui/src/components/loader/loader.tsx
new file mode 100644
index 00000000..ab820ac8
--- /dev/null
+++ b/packages/ui/src/components/loader/loader.tsx
@@ -0,0 +1,60 @@
+interface LoaderProps {
+ height?: string;
+ width?: string;
+ textColor?: string;
+ spinnerColor?: string;
+ spinnerSize?: string;
+ backgroundColor?: string;
+}
+
+const Loader: React.FC = ({
+ /**
+ * The height and width of the loader, using Tailwind CSS sizing classes.
+ * @default 'h-16' height: 4rem; (64px)
+ * @default 'w-16' width: 4rem; (64px)
+ */
+ height = "16",
+ width = "16",
+ /**
+ * The color of the text within the loader, using a Tailwind CSS color class.
+ * @default 'text-blue-500' color: rgb(59 130 246);
+ */
+ textColor = "blue-500",
+ /**
+ * The color of the spinner within the loader.
+ * @default '#1d4ed8' branding color
+ */
+ spinnerColor = "#1d4ed8",
+ /**
+ * The size of the spinner, using Tailwind CSS sizing classes.
+ * @default 'h-12 w-12' height: 3rem; width: 3rem; (48px)
+ */
+ spinnerSize = "12",
+ /**
+ * The background color of the loader, using a Tailwind CSS color class.
+ * @default 'bg-gray-100' background-color: rgb(243 244 246);
+ */
+ backgroundColor = "gray-100",
+}) => {
+ return (
+
+
+
+
Loading...
+
+ );
+};
+
+export default Loader;
diff --git a/packages/website/src/entities/branding/ui/logo.test.tsx b/packages/website/src/entities/branding/ui/logo.test.tsx
new file mode 100644
index 00000000..3968b707
--- /dev/null
+++ b/packages/website/src/entities/branding/ui/logo.test.tsx
@@ -0,0 +1,17 @@
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { MemoryRouter } from "react-router-dom";
+import Logo from "./logo";
+
+test("clicking on the logo redirects to the home page", async () => {
+ render(
+
+
+ ,
+ );
+
+ const logo = screen.getByTestId("logo");
+ userEvent.click(logo);
+
+ expect(window.location.pathname).toBe("/");
+});
diff --git a/packages/website/src/entities/branding/ui/logo.tsx b/packages/website/src/entities/branding/ui/logo.tsx
index 476f87a5..b1781061 100644
--- a/packages/website/src/entities/branding/ui/logo.tsx
+++ b/packages/website/src/entities/branding/ui/logo.tsx
@@ -1,14 +1,19 @@
import BrandMark from "./brandmark.svg";
+import { Link } from "react-router-dom";
export default function Logo() {
return (
-
+ /**
+ * reloadDocument - A property used in the Link component from React Router to skip client side routing and let the browser handle the transition normally (as if it were an ).
+ * @typedef {boolean} reloadDocument
+ */
+