navbar ui done

wizelineacademy · Apr 3, 2024 · 40bb959 · 40bb959
2 parents a0ce393 + 6826461
commit 40bb959
Show file tree

Hide file tree

Showing 14 changed files with 226 additions and 36 deletions.
diff --git a/app/dashboard/page.tsx b/app/dashboard/page.tsx
@@ -0,0 +1,9 @@
+const Dashboard = () => {
+  return (
+    <div>
+      <h1>Dashboard</h1>
+    </div>
+  );
+};
+
+export default Dashboard;
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -1,7 +1,7 @@
 import type { Metadata } from "next";
 import { Inter, Poppins } from "next/font/google";
 import "./globals.css";
-import dynamic from "next/dynamic";
+import NavigationBar from "@/components/NavigationBar";
 
 // const inter = Inter({ subsets: ["latin"] });
 
@@ -16,8 +16,6 @@ export const metadata: Metadata = {
   description: "Generated by create next app",
 };
 
-const Navbar = dynamic(() => import("../components/NavigationBar"));
-
 export default function RootLayout({
   children,
 }: Readonly<{
@@ -27,8 +25,8 @@ export default function RootLayout({
 
   return (
     <html lang="en">
-      <body className={poppins.className}>
-        <Navbar />
+      <body className={poppins.className + " h-dvh w-dvw bg-bone"}>
+        <NavigationBar />
         {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
@@ -1,6 +1,6 @@
 export default function Home() {
   return (
-    <main className="h-dvh w-dvw bg-white">
+    <main className="h-full w-full bg-bone">
       <a href="/login"> Login </a>
     </main>
   );

diff --git a/app/pip/page.tsx b/app/pip/page.tsx
@@ -0,0 +1,9 @@
+const PIP = () => {
+  return (
+    <div>
+      <h1>PIP</h1>
+    </div>
+  );
+};
+
+export default PIP;
diff --git a/app/profile/page.tsx b/app/profile/page.tsx
@@ -0,0 +1,9 @@
+const Profile = () => {
+  return (
+    <div>
+      <h1>Profile</h1>
+    </div>
+  );
+};
+
+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"} 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.5}
+        stroke="currentColor"
+        className={`${isActive ? "text-white" : "text-primary"} h-6 w-6 group-hover:text-white`}
+      >
+        <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,28 @@
+"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();
+
+  // si estamos en el login o register no mostramos la navbar
+  if (pathname === "/login" || pathname === "/register") return null;
+
+  return (
+    <nav className="flex items-center justify-between bg-bone p-4 ">
+      <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"} 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.5}
+        stroke="currentColor"
+        className={`${isActive ? "text-white" : "text-primary"} h-6 w-6 group-hover:text-white`}
+      >
+        <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"} 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.5}
+        stroke="currentColor"
+        className={`${isActive ? "text-white" : "text-primary"} h-6 w-6 group-hover:text-white`}
+      >
+        <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;
diff --git a/tailwind.config.ts b/tailwind.config.ts
@@ -15,7 +15,7 @@ const config: Config = {
           dark: "#492aa9",
         },
         secondary: "#4598FB",
-        white: "#F8F5F5",
+        bone: "#F8F5F5",
       },
       backgroundImage: {
         "gradient-radial": "radial-gradient(var(--tw-gradient-stops))",