Merge branch 'main' into feature/tasks-api

frontend/package.json

@@ -31,6 +31,7 @@
     "@syncfusion/ej2-base": "^23.1.41",
     "@syncfusion/ej2-kanban": "^23.1.36",
     "@tremor/react": "^3.11.1",
+    "@wojtekmaj/react-daterange-picker": "^5.4.4",
     "axios": "^1.6.1",
     "bootstrap": "^5.3.2",
     "dotenv": "^16.3.1",

frontend/pnpm-lock.yaml

@@ -68,6 +68,9 @@ dependencies:
   '@tremor/react':
     specifier: ^3.11.1
     version: 3.11.1(prop-types@15.8.1)(react-dom@18.2.0)(react@18.2.0)(tailwindcss@3.3.5)
+  '@wojtekmaj/react-daterange-picker':
+    specifier: ^5.4.4
+    version: 5.4.4(@types/react-dom@18.2.15)(@types/react@18.2.37)(react-dom@18.2.0)(react@18.2.0)
   axios:
     specifier: ^1.6.1
     version: 1.6.2
@@ -1554,6 +1557,29 @@ packages:
     resolution: {integrity: sha512-+i7+JmNiE/3c9FKxzWFi2IjRJ+KzZl1QPu6QNrsgaa2MuBgXvUy4gA1TVzf/JMdIIloB76xSKikTWuyYAIVLww==}
     dev: false
 
+  /@wojtekmaj/react-daterange-picker@5.4.4(@types/react-dom@18.2.15)(@types/react@18.2.37)(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-EoHFD2SHG1ZeBfdQ9NYaO9MzcdKXy8gikxxFlO3f7HJ/tOGI6/Vxt752sgNnCGsF4JlqVoWVHweyxYOExumRdA==}
+    peerDependencies:
+      '@types/react': ^16.8.0 || ^17.0.0 || ^18.0.0
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0
+      react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+    dependencies:
+      '@types/react': 18.2.37
+      clsx: 2.0.0
+      make-event-props: 1.6.2
+      prop-types: 15.8.1
+      react: 18.2.0
+      react-calendar: 4.6.1(@types/react@18.2.37)(react-dom@18.2.0)(react@18.2.0)
+      react-date-picker: 10.5.2(@types/react-dom@18.2.15)(@types/react@18.2.37)(react-dom@18.2.0)(react@18.2.0)
+      react-dom: 18.2.0(react@18.2.0)
+      react-fit: 1.7.1(@types/react-dom@18.2.15)(@types/react@18.2.37)(react-dom@18.2.0)(react@18.2.0)
+    transitivePeerDependencies:
+      - '@types/react-dom'
+    dev: false
+
   /acorn-jsx@5.3.2(acorn@8.11.2):
     resolution: {integrity: sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==}
     peerDependencies:

frontend/src/api/AuthenticationApi.jsx

@@ -7,14 +7,9 @@ const baseURL = import.meta.env.VITE_BASE_URL;
 export const apiUserLogin = (data) => {
   return axiosInstance
     .post("token/obtain/", data)
-    .then((response) => {
-      console.log(response.statusText);
-
-      return response;
-    })
+    .then((response) => response)
     .catch((error) => {
-      console.log("apiUserLogin error: ", error);
-      return error;
+      throw error;
     });
 };
 

frontend/src/components/FlaotingParticles.jsx

@@ -0,0 +1,91 @@
+import { useCallback } from "react";
+import Particles from "react-tsparticles";
+import { loadFull } from "tsparticles";
+
+export function FloatingParticles() {
+  const particlesInit = useCallback(async (engine) => {
+    await loadFull(engine);
+  }, []);
+
+  return (
+    <div
+      style={{
+        position: "absolute",
+        width: "100%",
+        height: "100vh",
+        zIndex: 0,
+        backgroundColor: "#EBF2FA",
+      }}>
+      <Particles
+        id="particles"
+        init={particlesInit}
+        className="-z-10"
+        options={{
+          fpsLimit: 240,
+          smooth: true,
+          interactivity: {
+            events: {
+              onClick: {
+                enable: true,
+                mode: "push",
+              },
+              onHover: {
+                enable: true,
+                mode: "repulse",
+              },
+              resize: true,
+            },
+            modes: {
+              push: {
+                quantity: 4,
+              },
+              repulse: {
+                distance: 200,
+                duration: 0.4,
+              },
+            },
+          },
+          particles: {
+            color: {
+              value: "#4f46e5",
+            },
+            links: {
+              color: "#818cf8",
+              distance: 150,
+              enable: true,
+              opacity: 0.5,
+              width: 1,
+            },
+            move: {
+              direction: "none",
+              enable: true,
+              outModes: {
+                default: "bounce",
+              },
+              random: false,
+              speed: 2,
+              straight: false,
+            },
+            number: {
+              density: {
+                enable: true,
+                area: 800,
+              },
+              value: 40,
+            },
+            opacity: {
+              value: 0.5,
+            },
+            shape: {
+              type: "square",
+            },
+            size: {
+              value: { min: 4, max: 5 },
+            },
+          },
+          detectRetina: true,
+        }}
+      />
+    </div>
+  );
+}

frontend/src/components/authentication/LoginPage.jsx

@@ -1,11 +1,11 @@
+import { useState } from "react";
 import { useNavigate, redirect } from "react-router-dom";
 import { useGoogleLogin } from "@react-oauth/google";
-import { useCallback, useState } from "react";
-import Particles from "react-tsparticles";
-import { loadFull } from "tsparticles";
 import { FcGoogle } from "react-icons/fc";
 import { useAuth } from "src/hooks/AuthHooks";
-import { googleLogin, apiUserLogin } from "src/api/AuthenticationApi";
+import { FloatingParticles } from "../FlaotingParticles";
+import { NavPreLogin } from "../navigations/NavPreLogin";
+import { apiUserLogin, googleLogin } from "src/api/AuthenticationApi";
 
 export function LoginPage() {
   const { setIsAuthenticated } = useAuth();
@@ -13,6 +13,7 @@ export function LoginPage() {
 
   const [email, setEmail] = useState("");
   const [password, setPassword] = useState("");
+  const [error, setError] = useState(null);
 
   const handleEmailChange = (event) => {
     setEmail(event.target.value);
@@ -21,6 +22,7 @@ export function LoginPage() {
   const handlePasswordChange = (event) => {
     setPassword(event.target.value);
   };
+
   const handleSubmit = (event) => {
     event.preventDefault();
 
@@ -30,15 +32,13 @@ export function LoginPage() {
       password: password,
     })
       .then((res) => {
-        // On successful login, store tokens and set the authorization header
         localStorage.setItem("access_token", res.data.access);
         localStorage.setItem("refresh_token", res.data.refresh);
         setIsAuthenticated(true);
         redirect("/");
       })
       .catch((err) => {
-        console.log("Login failed");
-        console.log(err);
+        setError("Incorrect username or password");
       });
   };
 
@@ -62,138 +62,80 @@ export function LoginPage() {
     },
     onError: (errorResponse) => console.log(errorResponse),
   });
-  {
-    /* Particles Loader*/
-  }
-  const particlesInit = useCallback(async (engine) => {
-    await loadFull(engine);
-  }, []);
 
   return (
-    <div data-theme="night" className="h-screen flex items-center justify-center">
-      {/* Particles Container */}
-      <div style={{ width: "0%", height: "100vh" }}>
-        <Particles
-          id="particles"
-          init={particlesInit}
-          className="-z-10"
-          options={{
-            fpsLimit: 240,
-            interactivity: {
-              events: {
-                onClick: {
-                  enable: true,
-                  mode: "push",
-                },
-                onHover: {
-                  enable: true,
-                  mode: "repulse",
-                },
-                resize: true,
-              },
-              modes: {
-                push: {
-                  quantity: 4,
-                },
-                repulse: {
-                  distance: 200,
-                  duration: 0.4,
-                },
-              },
-            },
-            particles: {
-              color: {
-                value: "#008000",
-              },
-              links: {
-                color: "#00ff00",
-                distance: 150,
-                enable: true,
-                opacity: 0.5,
-                width: 1,
-              },
-              move: {
-                direction: "none",
-                enable: true,
-                outModes: {
-                  default: "bounce",
-                },
-                random: false,
-                speed: 4,
-                straight: false,
-              },
-              number: {
-                density: {
-                  enable: true,
-                  area: 800,
-                },
-                value: 50,
-              },
-              opacity: {
-                value: 0.5,
-              },
-              shape: {
-                type: "circle",
-              },
-              size: {
-                value: { min: 4, max: 5 },
-              },
-            },
-            detectRetina: true,
-          }}
-        />
-      </div>
-      {/* Login Box */}
-      <div className="w-1/4 flex items-center justify-center">
-        <div className="w-96 bg-neutral rounded-lg p-8 shadow-md space-y-4 z-10">
-          <h2 className="text-3xl font-bold text-center">Login</h2>
-          {/* Email Input */}
-          <div className="form-control ">
-            <label className="label" htmlFor="email">
-              <p className="text-bold">
-                Email<span className="text-red-500 text-bold">*</span>
-              </p>
-            </label>
-            <input
-              className="input"
-              type="email"
-              id="email"
-              placeholder="Enter your email"
-              onChange={handleEmailChange}
-            />
-          </div>
-          {/* Password Input */}
-          <div className="form-control">
-            <label className="label" htmlFor="password">
-              <p className="text-bold">
-                Password<span className="text-red-500 text-bold">*</span>
-              </p>
-            </label>
-            <input
-              className="input"
-              type="password"
-              id="password"
-              placeholder="Enter your password"
-              onChange={handlePasswordChange}
-            />
-          </div>
-          {/* Login Button */}
-          <button className="btn btn-success w-full " onClick={handleSubmit}>
-            Login
-          </button>
-          <div className="divider">OR</div>
-          {/* Login with Google Button */}
-          <button className="btn btn-outline btn-secondary w-full " onClick={() => googleLoginImplicit()}>
-            <FcGoogle className="rounded-full bg-white" />
-            Login with Google
-          </button>
-          {/* Forgot Password Link */}
-          <div className="justify-left">
-            <a href="#" className="text-blue-500 text-sm text-left">
-              Forgot your password?
-            </a>
+    <div>
+      <NavPreLogin text="Don't have account?" btn_text="Sign Up" link="/signup" />
+      <div className="flex flex-row bg-neutral-400">
+        {/* Login Box */}
+        <div className="flex items-center justify-center flex-1 z-50">
+          <div className="w-100 bg-white border-solid rounded-lg p-8 shadow space-y-4">
+            <h2 className="text-3xl font-bold">Log in to your account</h2>
+            {/* Error Message */}
+            {error && (
+              <div role="alert" className="alert alert-error">
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  className="stroke-current shrink-0 h-6 w-6"
+                  fill="none"
+                  viewBox="0 0 24 24">
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth="2"
+                    d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"
+                  />
+                </svg>
+                <span>{error}</span>
+              </div>
+            )}
+            {/* Email Input */}
+            <div className="form-control ">
+              <label className="label" htmlFor="email">
+                <p className="text-bold">
+                  Email<span className="text-red-500 text-bold">*</span>
+                </p>
+              </label>
+              <input
+                className="input"
+                type="email"
+                id="email"
+                placeholder="Enter your email"
+                value={email}
+                onChange={handleEmailChange}
+              />
+            </div>
+            {/* Password Input */}
+            <div className="form-control">
+              <label className="label" htmlFor="password">
+                <p className="text-bold">
+                  Password<span className="text-red-500 text-bold">*</span>
+                </p>
+              </label>
+              <input
+                className="input"
+                type="password"
+                id="password"
+                placeholder="Enter your password"
+                value={password}
+                onChange={handlePasswordChange}
+              />
+            </div>
+            {/* Login Button */}
+            <button className="btn bg-blue-700 hover:bg-blue-900 w-full text-white font-bold" onClick={handleSubmit}>
+              Login
+            </button>
+            <div className="divider">OR</div>
+            {/* Login with Google Button */}
+            <button className="btn bg-gray-200 btn-outline w-full " onClick={() => googleLoginImplicit()}>
+              <FcGoogle className="rounded-full bg-white" />
+              Login with Google
+            </button>
           </div>
         </div>
+        <div className="basis-1/2 bg-#ebf2fa h-screen z-0">
+          <FloatingParticles />
+        </div>
       </div>
     </div>
   );

frontend/src/components/authentication/SignUpPage.jsx

@@ -1,29 +1,14 @@
 import { useState } from "react";
 import { useNavigate } from "react-router-dom";
-import { useCallback } from "react";
-import Particles from "react-tsparticles";
-import { loadFull } from "tsparticles";
 import { FcGoogle } from "react-icons/fc";
 import { useGoogleLogin } from "@react-oauth/google";
+import { NavPreLogin } from "../navigations/NavPreLogin";
 import { useAuth } from "src/hooks/AuthHooks";
 import { createUser, googleLogin } from "src/api/AuthenticationApi";
 
-function Copyright(props) {
-  return (
-    <div className="text-center text-sm text-gray-500" {...props}>
-      {"Copyright © "}
-      <a href="https://github.com/TurTaskProject/TurTaskWeb" className="text-blue-500 hover:underline">
-        TurTask
-      </a>{" "}
-      {new Date().getFullYear()}
-      {"."}
-    </div>
-  );
-}
-
 export function SignUp() {
   const Navigate = useNavigate();
-  const { setIsAuthenticated } = useAuth;
+  const { setIsAuthenticated } = useAuth();
 
   const [formData, setFormData] = useState({
     email: "",
@@ -53,12 +38,6 @@ export function SignUp() {
     const { name, value } = e.target;
     setFormData({ ...formData, [name]: value });
   };
-  {
-    /* Particles Loader*/
-  }
-  const particlesInit = useCallback(async (engine) => {
-    await loadFull(engine);
-  }, []);
 
   const googleLoginImplicit = useGoogleLogin({
     flow: "auth-code",
@@ -83,139 +62,73 @@ export function SignUp() {
   });
 
   return (
-    <div data-theme="night" className="h-screen flex items-center justify-center">
-      {/* Particles Container */}
-      <div style={{ width: "0%", height: "100vh" }}>
-        <Particles
-          id="particles"
-          init={particlesInit}
-          className="-z-10"
-          options={{
-            fpsLimit: 240,
-            interactivity: {
-              events: {
-                onClick: {
-                  enable: true,
-                  mode: "push",
-                },
-                onHover: {
-                  enable: true,
-                  mode: "repulse",
-                },
-                resize: true,
-              },
-              modes: {
-                push: {
-                  quantity: 4,
-                },
-                repulse: {
-                  distance: 200,
-                  duration: 0.4,
-                },
-              },
-            },
-            particles: {
-              color: {
-                value: "#023020",
-              },
-              links: {
-                color: "#228B22",
-                distance: 150,
-                enable: true,
-                opacity: 1,
-                width: 1,
-              },
-              move: {
-                direction: "none",
-                enable: true,
-                outModes: {
-                  default: "bounce",
-                },
-                random: false,
-                speed: 4,
-                straight: false,
-              },
-              number: {
-                density: {
-                  enable: true,
-                  area: 800,
-                },
-                value: 50,
-              },
-              opacity: {
-                value: 0.6,
-              },
-              shape: {
-                type: "circle",
-              },
-              size: {
-                value: { min: 6, max: 8 },
-              },
-            },
-            detectRetina: true,
-          }}
-        />
-      </div>
-      <div className="w-1/4 h-1 flex items-center justify-center">
-        <div className="w-96 bg-neutral rounded-lg p-8 shadow-md space-y-4 z-10">
-          {/* Register Form */}
-          <h2 className="text-3xl font-bold text-center">Signup</h2>
-          {/* Email Input */}
-          <div className="form-control ">
-            <label className="label" htmlFor="email">
-              <p className="text-bold">
-                Email<span className="text-red-500 text-bold">*</span>
-              </p>
-            </label>
-            <input className="input" type="email" id="email" placeholder="Enter your email" onChange={handleChange} />
-          </div>
-          {/* Username Input */}
-          <div className="form-control">
-            <label className="label" htmlFor="Username">
-              <p className="text-bold">
-                Username<span className="text-red-500 text-bold">*</span>
-              </p>
-            </label>
-            <input
-              className="input"
-              type="text"
-              id="Username"
-              placeholder="Enter your username"
-              onChange={handleChange}
-            />
-          </div>
-          {/* Password Input */}
-          <div className="form-control">
-            <label className="label" htmlFor="password">
-              <p className="text-bold">
-                Password<span className="text-red-500 text-bold">*</span>
-              </p>
-            </label>
-            <input
-              className="input"
-              type="password"
-              id="password"
-              placeholder="Enter your password"
-              onChange={handleChange}
-            />
-          </div>
-          <br></br>
+    <div>
+      <NavPreLogin text="Already have account?" btn_text="Log In" link="/login" />
+      <div className="h-screen flex items-center justify-center bg-gradient-to-r from-zinc-100 via-gray-200 to-zinc-100">
+        <div aria-hidden="true" className="absolute inset-0 grid grid-cols-2 -space-x-52 opacity-40">
+          <div className="blur-[106px] h-56 bg-gradient-to-br from-primary to-purple-400"></div>
+          <div className="blur-[106px] h-32 bg-gradient-to-r from-cyan-400 to-sky-300"></div>
+        </div>
+        <div className="w-1/4 h-1 flex items-center justify-center z-10">
+          <div className="w-96 bg-white rounded-lg p-8 space-y-4 z-10">
+            {/* Register Form */}
+            <h2 className="text-3xl font-bold text-center">Signup</h2>
+            {/* Email Input */}
+            <div className="form-control ">
+              <label className="label" htmlFor="email">
+                <p className="text-bold">
+                  Email<span className="text-red-500 text-bold">*</span>
+                </p>
+              </label>
+              <input className="input" type="email" id="email" placeholder="Enter your email" onChange={handleChange} />
+            </div>
+            {/* Username Input */}
+            <div className="form-control">
+              <label className="label" htmlFor="Username">
+                <p className="text-bold">
+                  Username<span className="text-red-500 text-bold">*</span>
+                </p>
+              </label>
+              <input
+                className="input"
+                type="text"
+                id="Username"
+                placeholder="Enter your username"
+                onChange={handleChange}
+              />
+            </div>
+            {/* Password Input */}
+            <div className="form-control">
+              <label className="label" htmlFor="password">
+                <p className="text-bold">
+                  Password<span className="text-red-500 text-bold">*</span>
+                </p>
+              </label>
+              <input
+                className="input"
+                type="password"
+                id="password"
+                placeholder="Enter your password"
+                onChange={handleChange}
+              />
+            </div>
+            <br></br>
 
-          {/* Signups Button */}
-          <button className="btn btn-success w-full " onClick={handleSubmit}>
-            Signup
-          </button>
-          <div className="divider">OR</div>
-          {/* Login with Google Button */}
-          <button className="btn btn-outline btn-secondary w-full " onClick={() => googleLoginImplicit()}>
-            <FcGoogle className="rounded-full bg-white" />
-            Login with Google
-          </button>
-          {/* Already have an account? */}
-          <div className="text-blue-500 flex justify-center text-sm">
-            <a href="login">Already have an account?</a>
+            {/* Signups Button */}
+            <button className="btn btn-success w-full " onClick={handleSubmit}>
+              Signup
+            </button>
+            <div className="divider">OR</div>
+            {/* Login with Google Button */}
+            <button className="btn btn-outline btn-secondary w-full " onClick={() => googleLoginImplicit()}>
+              <FcGoogle className="rounded-full bg-white" />
+              Login with Google
+            </button>
+            {/* Already have an account? */}
+            <div className="text-blue-500 flex justify-center text-sm">
+              <a href="login">Already have an account?</a>
+            </div>
           </div>
-          <Copyright />
         </div>
       </div>
     </div>

frontend/src/components/dashboard/dashboard.jsx

@@ -4,13 +4,20 @@ import { BarChartGraph } from "./Barchart";
 import { DonutChartGraph } from "./DonutChart";
 import { AreaChartGraph } from "./Areachart";
 import { ProgressCircleChart } from "./ProgressCircle";
+import { useState } from "react";
 
 export function Dashboard() {
+  const [value, setValue] = useState({
+    from: new Date(2021, 0, 1),
+    to: new Date(2023, 0, 7),
+  });
+  console.log(value);
   return (
     <div className="flex flex-col p-12">
       <div>
         <Title>Dashboard</Title>
         <Text>All of your progress will be shown right here.</Text>
+        <br />
       </div>
 
       <div>

frontend/src/components/kanbanBoard/taskCard.jsx

@@ -44,7 +44,7 @@ export function TaskCard({ task, deleteTask, updateTask }) {
         description={task.description}
         tags={task.tags}
         difficulty={task.difficulty}
-        challenge={task.challenge}
+    f    challenge={task.challenge}
         importance={task.importance}
       />
       <div

frontend/src/components/landingPage/LandingPage.jsx

@@ -1,28 +1,19 @@
+import { FloatingParticles } from "../FlaotingParticles";
+
 export function LandingPage() {
   return (
     <div>
-      <div className="navbar bg-base-100">
-        <div className="navbar-start">
-          <a className="btn btn-ghost text-xl">TurTask</a>
-        </div>
-        <div className="navbar-end space-x-3 pr-2">
-          <a className="btn" href="/login">
-            Login
-          </a>
-          <a className="btn" href="/signup">
-            Sign Up
-          </a>
-        </div>
+      {/* Particles Container */}
+      <FloatingParticles />
+      {/* Navbar */}
+      <div className="navbar bg-white z-10">
+        <div className="navbar-end space-x-3 z-10"></div>
       </div>
       <div className="relative" id="home">
-        <div aria-hidden="true" className="absolute inset-0 grid grid-cols-2 -space-x-52 opacity-40">
-          <div className="blur-[106px] h-56 bg-gradient-to-br from-primary to-purple-400"></div>
-          <div className="blur-[106px] h-32 bg-gradient-to-r from-cyan-400 to-sky-300"></div>
-        </div>
         <div className="max-w-7xl mx-auto px-6 md:px-12 xl:px-6">
           <div className="relative pt-36 ml-auto">
             <div className="lg:w-2/3 text-center mx-auto">
-              <h1 className="text-gray-900 font-bold text-5xl md:text-6xl xl:text-7xl">
+              <h1 className="text-#143D6C font-bold text-5xl md:text-6xl xl:text-7xl">
                 Manage your task with{" "}
                 <span className="text-primary">
                   TurTask
@@ -33,21 +24,13 @@ export function LandingPage() {
                   </label>
                 </span>
               </h1>
-              <p className="mt-8 text-gray-700">
-                Lorem ipsum dolor sit amet consectetur adipisicing elit. Odio incidunt nam itaque sed eius modi error
-                totam sit illum. Voluptas doloribus asperiores quaerat aperiam. Quidem harum omnis beatae ipsum soluta!
-              </p>
-              <div className="mt-16 flex flex-wrap justify-center gap-y-4 gap-x-6">
+              <p className="mt-8 text-#143D6C">Unleash productivity with our personal task and project management.</p>
+              <div className="mt-8 flex flex-wrap justify-center gap-y-4 gap-x-6">
                 <a
                   href="/login"
                   className="relative flex h-11 w-full items-center justify-center px-6 before:absolute before:inset-0 before:rounded-full before:bg-primary before:transition before:duration-300 hover:before:scale-105 active:duration-75 active:before:scale-95 sm:w-max">
                   <span className="relative text-base font-semibold text-white">Get started</span>
                 </a>
-                <a
-                  href="#"
-                  className="relative flex h-11 w-full items-center justify-center px-6 before:absolute before:inset-0 before:rounded-full before:border before:border-transparent before:bg-primary/10 before:bg-gradient-to-b before:transition before:duration-300 hover:before:scale-105 active:duration-75 active:before:scale-95 sm:w-max">
-                  <span className="relative text-base font-semibold text-primary">Placeholder</span>
-                </a>
               </div>
             </div>
           </div>

frontend/src/components/navigations/NavPreLogin.jsx

@@ -0,0 +1,16 @@
+import { Link } from "react-router-dom";
+
+export const NavPreLogin = ({ text, btn_text, link }) => {
+  return (
+    <div className="navbar bg-base-100 sticky top-0 z-50 border-2 border-neutral-400">
+      <div className="navbar-start"></div>
+      <div className="navbar-center hidden lg:flex"></div>
+      <div className="navbar-end space-x-3">
+        <p className="font-bold">{text}</p>
+        <Link to={link} className="btn bg-blue-700 hover:bg-blue-900 text-white font-bold">
+          {btn_text}
+        </Link>
+      </div>
+    </div>
+  );
+};

package.json

@@ -0,0 +1 @@
+{}

pnpm-lock.yaml

@@ -0,0 +1,5 @@
+lockfileVersion: '6.0'
+
+settings:
+  autoInstallPeers: true
+  excludeLinksFromLockfile: false