Add component

src/components/Common/BasicButton.jsx

@@ -0,0 +1,64 @@
+import React from "react";
+import { Button, ConfigProvider } from 'antd';
+import propTypes from 'prop-types';
+
+const BasicButton = ({
+  // color,
+  text,
+  size,
+  block,
+  clickTheButton
+}) => {
+  return (
+    <>
+      <ConfigProvider
+        theme={{
+          token: {
+            // colorBgContainer: '#23A55A',
+            colorText: 'white',
+            colorBgContainer: 'purple',
+            // Seed Token
+          //   colorPrimary: '#23A55A',
+          //   // colorPrimary: `${color}`,
+          //   borderRadius: 8,
+            
+
+          //   // Alias Token
+          //   // colorBgContainer: '#f6ffed',
+          //   // colorBgContainer: {color},
+          },
+          components: {
+            Button: {
+              defaultBg: '#23A55A',
+              defaultColor: 'white',
+            }
+          },
+        }}
+      >
+        <Button
+          type=""
+          block={block}
+          size={size}
+          onClick={() => clickTheButton(block)}
+        // style={{
+        //   background: "#23A55A",
+        //   borderColor: "#23A55A",
+        //   color: "white",
+        // }}
+        >
+          {text}
+        </Button>
+      </ConfigProvider>
+    </>
+  );
+}
+
+BasicButton.propTypes = {
+  // color: propTypes.string,
+  text: propTypes.string,
+  size: propTypes.string,
+  block: propTypes.bool,
+  clickTheButton: propTypes.any
+}
+
+export default BasicButton;

src/components/Common/BasicInput.jsx

@@ -0,0 +1,21 @@
+import { theme } from "antd";
+import React from "react";
+// import packageJson from "../../../package.json";
+
+const BasicInput = () => {
+  const {
+    token: { colorPrimary },
+  } = theme.useToken();
+  
+  return (
+    <div
+      data-testid="versionContainer"
+      className="cursor-default fixed top-1 right-1 z-20 m-1"
+      style={{ color: colorPrimary }}
+    >
+      
+    </div>
+  );
+};
+
+export default BasicInput;

src/components/Common/NavBar.jsx

@@ -0,0 +1,58 @@
+import { Layout, theme } from "antd";
+import React from 'react'
+import propTypes from 'prop-types';
+
+const { Header } = Layout;
+
+const navbarClass =
+  "text-white text-h5 flex flex-col whitespace-nowrap overflow-hidden text-ellipsis";
+const styles = {
+  navbarTitleFullSize: navbarClass,
+  navbarTitle: navbarClass + " max-w-[calc(100vw-200px)]",
+};
+const NavBar = ({ fullSize }) => {
+  const {
+    token: { colorPrimary },
+  } = theme.useToken();
+
+  console.log("import.meta", import.meta)
+
+  return (
+    <Header
+      data-testid="navbarContainer"
+      className="fixed z-10 flex w-full drop-shadow-md"
+      style={{
+        backgroundColor: colorPrimary,
+        paddingInline: 0,
+      }}
+    >
+      <div className="flex h-full w-full items-center gap-4 pl-[5%]">
+        <a href="/">
+          <div
+            data-testid="navbarLogo"
+            className="h-12 w-48 bg-white text-center"
+          >
+            LOGO
+          </div>
+        </a>
+        <div
+          data-testid="navbarTitle"
+          className={fullSize ? styles.navbarTitleFullSize : styles.navbarTitle}
+        >
+          <div className="text-[2.9vw] font-bold leading-8 sm:text-h5">
+            {import.meta.env.VITE_PROJECT_NAME}
+          </div>
+          <div className="pb-1 text-[2vw] font-bold uppercase leading-3 sm:text-small">
+            {import.meta.env.VITE_PROJECT_DESCRIPTION}
+          </div>
+        </div>
+      </div>
+    </Header>
+  );
+};
+
+NavBar.propTypes = {
+  fullSize: propTypes.any,
+}
+
+export default NavBar;

src/components/Common/Version.jsx

@@ -0,0 +1,20 @@
+import { theme } from "antd";
+import React from "react";
+import packageJson from "../../../package.json";
+
+const Version = () => {
+  const {
+    token: { colorPrimary },
+  } = theme.useToken();
+  return (
+    <div
+      data-testid="versionContainer"
+      className="cursor-default fixed top-1 right-1 z-20 m-1"
+      style={{ color: colorPrimary }}
+    >
+      v{packageJson.version}
+    </div>
+  );
+};
+
+export default Version;