Fixes #30 UI addition for signup and login modal

1. KlinicAuthForm renamed to AuthForm that displays the form for login and sign up
2. Modal component created to display the login and sign up form and also state is handled to display modal when close button is clicked or anywhere in the page
3. KlinicAuthContainer is removed and renamed to Modal component
4. Button component modified so that first logo can be displayed following the button text (earlier it was text followed by children) now children is displayed followed by button text
5. Header component is created to display the LogIn button so that when clicked modal and related forms is displayed

src/components/KlinicAuthForm.jsx → src/components/AuthForm.jsx

@@ -2,13 +2,8 @@ import {Input, Variant} from "./Input.jsx";
 import Button from "./Button.jsx";
 import PropTypes from "prop-types";
 
-const KlinicAuthForm = ({
-                          headerText,
-                          promptText,
-                          actionLink,
-                          actionLinkText,
-                          buttonText
-                        }) => {
+const AuthForm = ({ headerText, promptText, actionLink, actionLinkText, buttonText }) => {
+
   return (
       <div className={"flex flex-col items-center rounded-xl px-8 py-12"}>
         <div className={"flex flex-col items-center "}>
@@ -22,7 +17,7 @@ const KlinicAuthForm = ({
           </div>
         </div>
         <div className={"flex flex-col"}>
-          <form className={"w-[400px]"}
+          <form className={"w-[500px]"}
                 onSubmit={(e) => {
                   e.preventDefault();
                 }}>
@@ -53,12 +48,12 @@ const KlinicAuthForm = ({
   )
 }
 
-KlinicAuthForm.propTypes = {
+AuthForm.propTypes = {
   headerText: PropTypes.string,
   promptText: PropTypes.string,
   actionLink: PropTypes.string,
   actionLinkText: PropTypes.string,
   buttonText: PropTypes.string.isRequired,
 }
 
-export default KlinicAuthForm;
+export default AuthForm;

src/components/Button.jsx

@@ -1,5 +1,5 @@
 import PropTypes from "prop-types";
-import { Link } from "react-router-dom";
+import {Link} from "react-router-dom";
 import classNames from "classnames";
 
 const Button = ({
@@ -43,12 +43,12 @@ const Button = ({
   ) : (
     <button onClick={onClick} className={buttonClass} {...props}>
       {children ? (
-        <>
-          <span>{text}</span>
-          {children}
-        </>
+          <>
+            {children}
+            <span>{text}</span>
+          </>
       ) : (
-        text
+          text
       )}
     </button>
   );

src/components/Header.jsx

@@ -0,0 +1,34 @@
+import Button from "./Button.jsx";
+import "@fortawesome/fontawesome-free/css/all.min.css";
+import {useState} from "react";
+import Modal from "./Modal.jsx";
+
+const Header = () => {
+	const [isModalOpen, setIsModalOpen] = useState(false);
+	const handleClick = () => {
+		setIsModalOpen(!isModalOpen);
+	}
+
+	const handleContainer = (e) => {
+		if (e.target.parentElement.id === "parent-container") {
+			setIsModalOpen(false);
+		}
+	}
+
+	return (
+			<div className={"bg-white overflow-hidden"} id={"parent-container"} onClick={handleContainer}>
+				<header className={"flex justify-end items-center p-4"}>
+					<Button text={"Login"} onClick={handleClick}>
+						<i className={"fa-solid fa-user mr-2"}></i>
+					</Button>
+				</header>
+				{
+						isModalOpen && (
+								<Modal setIsModalOpen={setIsModalOpen} />
+						)
+				}
+			</div>
+	)
+}
+
+export default Header;

src/components/Modal.jsx

@@ -0,0 +1,65 @@
+import AuthForm from "./AuthForm.jsx";
+import {useState} from "react";
+import clsx from "clsx";
+import PropTypes from 'prop-types';
+
+const Modal = ({ setIsModalOpen }) => {
+  const [isSignUp, setIsSignUp] = useState(true);
+  const [isLogin, setIsLogin] = useState(false);
+  const signUpState = () => {
+    setIsSignUp(true);
+    setIsLogin(false);
+  }
+
+  const loginState = () => {
+    setIsLogin(true);
+    setIsSignUp(false);
+  }
+
+  return (
+      <>
+        <div className={"bg-black border border-neutral-400 fixed inset-0 bg-opacity-50 flex items-center justify-center"}>
+          <div className={"relative flex flex-col items-center border border-neutral-100 bg-white rounded-xl px-8 py-10 w-[650px]"}>
+            <div className={"absolute mb-4 right-8 top-2"}>
+              <button onClick={() => setIsModalOpen(false)}>
+                <i className="text-3xl fa-solid fa-xmark text-gray-500"></i>
+              </button>
+            </div>
+            <div className={"flex border border-orange-400 rounded-full overflow-clip"}>
+              <div>
+                <button className={clsx("px-20 py-2 text-lg border-r-2 border-orange-400", isSignUp ? "text-black font-semibold bg-orange-50" : "text-orange-500 font-semibold")}
+                        onClick={loginState}>Login
+                </button>
+              </div>
+              <div>
+                <button className={clsx("px-20 py-2 text-lg", isSignUp ? "text-orange-500 font-semibold" : "text-black font-semibold bg-orange-50")}
+                        onClick={signUpState}>Signup
+                </button>
+              </div>
+            </div>
+            {
+              isSignUp && <AuthForm headerText={"Register"}
+                            promptText={"Already have an account?"}
+                            actionLink={"#"}
+                            actionLinkText={"Login"}
+                            buttonText={"SIGN UP"}/>
+            }
+            {
+              isLogin && <AuthForm headerText={"Welcome Back!"}
+                                   promptText={"Still don't have an account?"}
+                                   actionLink={"#"}
+                                   actionLinkText={"Sign up"}
+                                   buttonText={"LOGIN"}/>
+            }
+          </div>
+        </div>
+
+      </>
+  );
+};
+
+Modal.propTypes = {
+  setIsModalOpen: PropTypes.func.isRequired,
+};
+
+export default Modal;