fix merge conflicts

wizelineacademy · Apr 3, 2024 · ee38aad · ee38aad
2 parents 1e25a3a + daa034b
commit ee38aad
Show file tree

Hide file tree

Showing 17 changed files with 330 additions and 50 deletions.
diff --git a/app/dashboard/page.tsx b/app/dashboard/page.tsx
@@ -0,0 +1,11 @@
+import NavigationBar from "@/components/NavigationBar";
+
+const Dashboard = () => {
+  return (
+    <main>
+      <NavigationBar />
+    </main>
+  );
+};
+
+export default Dashboard;
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -17,8 +17,6 @@ export const metadata: Metadata = {
   description: "Generated by create next app",
 };
 
-const Navbar = dynamic(() => import("../components/NavigationBar"));
-
 export default function RootLayout({
   children,
 }: Readonly<{
@@ -27,10 +25,10 @@ export default function RootLayout({
   // if the current route is login or register, we don't want to show the nav bar
 
   return (
-    <ClerkProvider>
-      <html lang="en">
-        <body className={poppins.className}>{children}</body>
-      </html>
-    </ClerkProvider>
+    <html lang="en">
+      <body className={poppins.className + " bg-bone h-dvh w-dvw"}>
+        {children}
+      </body>
+    </html>
   );
 }
diff --git a/app/login/page.tsx b/app/login/page.tsx
@@ -12,8 +12,8 @@ const Login = () => {
 
   return (
     <main className="flex h-dvh w-full items-center justify-center bg-gradient-to-r from-primary to-primary-light">
-      <section className="h-[80%] w-[459px] rounded-[20px] bg-white drop-shadow-md">
-        <p className="mx-8 mt-10 text-center text-4xl font-medium leading-tight text-black">
+      <section className="h-5/6 w-[30%] rounded-[20px] bg-bone drop-shadow-md">
+        <p className="mx-8 mt-10 text-center text-4xl font-medium leading-normal text-black">
           Welcome to Feedback Flow
         </p>
         <Image
@@ -34,19 +34,19 @@ const Login = () => {
         >
           <label className="self-start text-xl text-black">Email</label>
           <input
-            className="text-md mt-2 h-12 w-full rounded-2xl border border-black bg-white px-2 text-black"
+            className="text-md mt-2 h-12 w-full rounded-2xl border border-black bg-bone px-2 text-black"
             type="email"
             placeholder="[email protected]"
           />
           <label className="mt-5 self-start text-xl text-black">Password</label>
           <input
-            className="text-md mt-2 h-12 w-full rounded-2xl border border-black bg-white px-2 text-black"
+            className="text-md mt-2 h-12 w-full rounded-2xl border border-black bg-bone px-2 text-black"
             type="password"
             placeholder="********"
           />
           {/* Find a darker color for hover */}
           <button
-            className="mx-auto my-8 h-12 w-28 rounded-3xl bg-primary text-white shadow-2xl hover:bg-primary-dark"
+            className="mx-auto my-8 h-12 w-28 rounded-3xl bg-primary text-bone shadow-2xl hover:bg-primary-dark"
             type="submit"
           >
             Login

diff --git a/app/page.tsx b/app/page.tsx
diff --git a/app/pip/page.tsx b/app/pip/page.tsx
@@ -0,0 +1,11 @@
+import NavigationBar from "@/components/NavigationBar";
+
+const PIP = () => {
+  return (
+    <main>
+      <NavigationBar />
+    </main>
+  );
+};
+
+export default PIP;
diff --git a/app/profile/page.tsx b/app/profile/page.tsx
@@ -0,0 +1,37 @@
+import NavigationBar from "@/components/NavigationBar";
+import UserProfileButton from "@/components/UserProfileButton";
+import Image from "next/image";
+import JobSVG from "@/public/Job-Profile-Image.svg";
+
+const Profile = () => {
+  const userName = "Adrián Alejandro Ramírez Cruz";
+  const userEmail = "[email protected]";
+  const userRole = "Software Engineer";
+  const userDepartment = "IT Department";
+  return (
+    <main className=" h-dvh w-dvw overflow-hidden">
+      <NavigationBar />
+      <section className="mx-auto mt-6 flex h-52 w-[95%] rounded-xl bg-primary">
+        <UserProfileButton
+          size="lg"
+          className="absolute left-20 top-60 h-fit"
+          photoUrl="https://static.wikia.nocookie.net/heroe/images/0/08/Lucario_SSBU.png/revision/latest?cb=20200104023610&path-prefix=es"
+        />
+        <div className="flex w-5/6 flex-row items-center justify-between">
+          <div className="ps-56 leading-tight text-white">
+            <p className=" text-3xl font-semibold">{userName}</p>
+            <div className="flex flex-row items-center gap-2 text-xl">
+              <p className="font-medium">{userRole}</p>
+              <p className="font-normal">-</p>
+              <p className="font-normal">{userDepartment}</p>
+            </div>
+            <p className="font-light">{userEmail}</p>
+          </div>
+          <Image src={JobSVG} alt="image" className="hidden md:block" />
+        </div>
+      </section>
+    </main>
+  );
+};
+
+export default Profile;
diff --git a/components/DashboardIcon.tsx b/components/DashboardIcon.tsx
@@ -0,0 +1,31 @@
+import Link from "next/link";
+
+interface DashboardIconInterface {
+  path: string;
+  currentPath: string;
+}
+const DashboardIcon = ({ path, currentPath }: DashboardIconInterface) => {
+  const isActive = currentPath === path;
+  return (
+    <Link
+      href={path}
+      className={`${isActive ? "bg-primary" : "bg-white transition-all delay-0 hover:scale-[1.175]"} group rounded-full p-2 drop-shadow-lg`}
+    >
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        fill="none"
+        viewBox="0 0 24 24"
+        strokeWidth={1.5}
+        stroke="currentColor"
+        className={`${isActive ? "text-white" : "text-primary"} h-6 w-6`}
+      >
+        <path
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          d="M3 13.125C3 12.504 3.504 12 4.125 12h2.25c.621 0 1.125.504 1.125 1.125v6.75C7.5 20.496 6.996 21 6.375 21h-2.25A1.125 1.125 0 0 1 3 19.875v-6.75ZM9.75 8.625c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125v11.25c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 0 1-1.125-1.125V8.625ZM16.5 4.125c0-.621.504-1.125 1.125-1.125h2.25C20.496 3 21 3.504 21 4.125v15.75c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 0 1-1.125-1.125V4.125Z"
+        />
+      </svg>
+    </Link>
+  );
+};
+export default DashboardIcon;
diff --git a/components/NavigationBar.jsx b/components/NavigationBar.jsx
diff --git a/components/NavigationBar.tsx b/components/NavigationBar.tsx
@@ -0,0 +1,24 @@
+"use client";
+import { usePathname } from "next/navigation";
+import PIPIcon from "./PIPIcon";
+import DashboardIcon from "./DashboardIcon";
+import UserIcon from "./UserIcon";
+import SearchBar from "./SearchBar";
+import Notifications from "./Notifications";
+
+const NavigationBar = () => {
+  const pathname = usePathname();
+  return (
+    <nav className="mx-8 mt-10 flex items-center justify-between bg-bone">
+      <h1 className="text-3xl font-bold text-primary">FEEDBACK FLOW</h1>
+      <div className="flex flex-row gap-5 p-1">
+        <PIPIcon path="/pip" currentPath={pathname} />
+        <DashboardIcon path="/dashboard" currentPath={pathname} />
+        <UserIcon path="/profile" currentPath={pathname} />
+        <SearchBar placeholder="Search Co-workers ..." />
+        <Notifications />
+      </div>
+    </nav>
+  );
+};
+export default NavigationBar;
diff --git a/components/Notifications.tsx b/components/Notifications.tsx
@@ -0,0 +1,34 @@
+"use client";
+
+import { useState } from "react";
+
+const Notifications = () => {
+  const [isActive, setIsActive] = useState(false);
+  const notificationsCount = 1;
+  return (
+    <div
+      onClick={() => setIsActive(!isActive)}
+      className={`${isActive ? "bg-primary" : "bg-white"} group rounded-full p-2 drop-shadow-lg hover:bg-primary`}
+    >
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        fill="none"
+        viewBox="0 0 24 24"
+        strokeWidth={1.8}
+        stroke="currentColor"
+        className={`${isActive ? "text-white" : "text-primary"} h-6 w-6 group-hover:text-white`}
+      >
+        <path
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          d="M14.857 17.082a23.848 23.848 0 0 0 5.454-1.31A8.967 8.967 0 0 1 18 9.75V9A6 6 0 0 0 6 9v.75a8.967 8.967 0 0 1-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 0 1-5.714 0m5.714 0a3 3 0 1 1-5.714 0"
+        />
+      </svg>
+      {notificationsCount > 0 && (
+        <span className=" absolute -right-px -top-px flex h-3 w-3 items-center justify-center rounded-full bg-red-700 " />
+      )}
+    </div>
+  );
+};
+
+export default Notifications;
diff --git a/components/PIPIcon.tsx b/components/PIPIcon.tsx
@@ -0,0 +1,32 @@
+import Link from "next/link";
+
+interface PIPIconInterface {
+  path: string;
+  currentPath: string;
+}
+const PIPIcon = ({ path, currentPath }: PIPIconInterface) => {
+  const isActive = currentPath === path;
+  return (
+    <Link
+      href={path}
+      className={`${isActive ? "bg-primary" : "bg-white transition-all delay-0 hover:scale-[1.175]"} group rounded-full p-2 drop-shadow-lg`}
+    >
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        fill="none"
+        viewBox="0 0 24 24"
+        strokeWidth={1.5}
+        stroke="currentColor"
+        className={`${isActive ? "text-white" : "text-primary"} h-6 w-6`}
+      >
+        <path
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          d="M9 6.75V15m6-6v8.25m.503 3.498 4.875-2.437c.381-.19.622-.58.622-1.006V4.82c0-.836-.88-1.38-1.628-1.006l-3.869 1.934c-.317.159-.69.159-1.006 0L9.503 3.252a1.125 1.125 0 0 0-1.006 0L3.622 5.689C3.24 5.88 3 6.27 3 6.695V19.18c0 .836.88 1.38 1.628 1.006l3.869-1.934c.317-.159.69-.159 1.006 0l4.994 2.497c.317.158.69.158 1.006 0Z"
+        />
+      </svg>
+    </Link>
+  );
+};
+
+export default PIPIcon;
diff --git a/components/SearchBar.tsx b/components/SearchBar.tsx
@@ -0,0 +1,33 @@
+interface SearchBarInterface {
+  placeholder: string;
+}
+
+const SearchBar = ({ placeholder }: SearchBarInterface) => {
+  return (
+    <div className="flex h-10 w-64 items-center rounded-full bg-white drop-shadow-lg">
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        fill="none"
+        viewBox="0 0 24 24"
+        strokeWidth={2}
+        stroke="currentColor"
+        className="ml-5 mr-2 h-6 w-6 text-primary"
+      >
+        <path
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z"
+        />
+      </svg>
+
+      <input
+        name="search"
+        type="text"
+        placeholder={placeholder}
+        className=" h-full w-4/6 rounded-full text-sm text-primary placeholder-primary focus:outline-none"
+      />
+    </div>
+  );
+};
+
+export default SearchBar;
diff --git a/components/UserIcon.tsx b/components/UserIcon.tsx
@@ -0,0 +1,31 @@
+import Link from "next/link";
+
+interface UserIconInterface {
+  path: string;
+  currentPath: string;
+}
+const UserIcon = ({ path, currentPath }: UserIconInterface) => {
+  const isActive = currentPath === path;
+  return (
+    <Link
+      href="/profile"
+      className={`${isActive ? "bg-primary" : "bg-white transition-all delay-0 hover:scale-[1.175]"} group rounded-full p-2 drop-shadow-lg`}
+    >
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        fill="none"
+        viewBox="0 0 24 24"
+        strokeWidth={1.5}
+        stroke="currentColor"
+        className={`${isActive ? "text-white" : "text-primary"} h-6 w-6 `}
+      >
+        <path
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          d="M17.982 18.725A7.488 7.488 0 0 0 12 15.75a7.488 7.488 0 0 0-5.982 2.975m11.963 0a9 9 0 1 0-11.963 0m11.963 0A8.966 8.966 0 0 1 12 21a8.966 8.966 0 0 1-5.982-2.275M15 9.75a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z"
+        />
+      </svg>
+    </Link>
+  );
+};
+export default UserIcon;