Merge pull request #11 from chingu-x/CGD-33-Navbar

Cgd 33 navbar
chingu-x · Sep 8, 2023 · bf37d55 · bf37d55
2 parents 20b8481 + 5bc761e
commit bf37d55
Show file tree

Hide file tree

Showing 16 changed files with 121 additions and 18 deletions.
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -69,6 +69,7 @@
     "object-curly-newline": [2, { "minProperties": 4, "consistent": true }],
     "brace-style": 2,
     "no-multiple-empty-lines": 2,
-    "eol-last": [2, "always"]
+    "eol-last": [2, "always"],
+    "no-nested-ternary": 2
   }
 }
diff --git a/public/avatar.png b/public/avatar.png
diff --git a/public/chingu_logo.png b/public/chingu_logo.png
diff --git a/public/grey_ball.png b/public/grey_ball.png
diff --git a/public/next.svg b/public/next.svg
diff --git a/public/vercel.svg b/public/vercel.svg
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -1,8 +1,7 @@
 import "./globals.css";
 import type { Metadata } from "next";
 import { Inter } from "next/font/google";
-import { BellIcon } from "@heroicons/react/24/solid";
-import { StoreProvider } from "@/components";
+import { StoreProvider, Navbar } from "@/components";
 
 export const metadata: Metadata = {
   title: "Create Next App",
@@ -24,9 +23,7 @@ export default function RootLayout({
   return (
     <html lang="en" className={`${inter.className} bg-base-content`}>
       <body>
-        <nav>
-          <BellIcon className="h-12 w-12 text-primary" />
-        </nav>
+        <Navbar />
         <StoreProvider>{children}</StoreProvider>
       </body>
     </html>

diff --git a/src/app/tech-stack/components/TechStackContainer.tsx b/src/app/tech-stack/components/TechStackContainer.tsx
@@ -3,6 +3,15 @@ import styles from "./TechStackContainer.module.css";
 import { TechStackCard } from ".";
 
 export default function TechStackContainer() {
+  function getJustifyClass(index: number) {
+    if (index % 3 === 0) {
+      return "justify-self-start";
+    } else if (index % 3 === 1) {
+      return "justify-self-center";
+    } else {
+      return "justify-self-end";
+    }
+  }
   return (
     <div
       className={`card bg-primary-content p-10 ${styles["tech-container-width"]}`}
@@ -11,13 +20,7 @@ export default function TechStackContainer() {
         {Object.keys(techStack).map((cardType, index) => (
           <li
             key={cardType}
-            className={`mx-auto xl:mx-0 ${
-              index % 3 === 0
-                ? "justify-self-start"
-                : index % 3 === 1
-                ? "justify-self-center" // eslint-disable-line
-                : "justify-self-end" // eslint-disable-line
-            }`}
+            className={`mx-auto xl:mx-0 ${getJustifyClass(index)}`}
           >
             <TechStackCard
               title={cardType}

diff --git a/src/components/Avatar.tsx b/src/components/Avatar.tsx
@@ -6,13 +6,17 @@ interface AvatarProps {
   height: number;
 }
 
-export default function Avatar({ image, width, height }: AvatarProps) {
+export default function Avatar({
+  image,
+  width = 24,
+  height = 24,
+}: AvatarProps) {
   return (
-    <div className="avatar rounded-full border border-base-content">
+    <div className="px-0 pointer-events-none rounded-full">
       <Image
         alt="avatar"
         src={
-          image ||
+          image ??
           "https://png.pngtree.com/png-vector/20210604/ourmid/pngtree-gray-avatar-placeholder-png-image_3416697.jpg"
         }
         width={width}

diff --git a/src/components/index.ts b/src/components/index.ts
@@ -1,3 +1,4 @@
 export { default as StoreProvider } from "./StoreProvider";
 export { default as Avatar } from "./Avatar";
+export { default as Navbar } from "./navbar/Navbar";
 export { default as Button } from "./Button";
diff --git a/src/components/navbar/Bell.tsx b/src/components/navbar/Bell.tsx
@@ -0,0 +1,16 @@
+import { BellIcon } from "@heroicons/react/20/solid";
+
+export default function Bell({
+  notificationCount,
+}: {
+  notificationCount: number;
+}) {
+  return (
+    <div className="indicator">
+      <span className="indicator-item badge badge-error px-1 rounded-full text-white">
+        {notificationCount}
+      </span>
+      <BellIcon className="h-6 w-6 hover:text-base-100 duration-200 self-center cursor-pointer" />
+    </div>
+  );
+}
diff --git a/src/components/navbar/ChinguMenu.tsx b/src/components/navbar/ChinguMenu.tsx
@@ -0,0 +1,16 @@
+import Image from "next/image";
+
+export default function ChinguMenu() {
+  return (
+    <div className="flex items-center gap-2 cursor-pointer">
+      <Image
+        src="/chingu_logo.png"
+        width={50}
+        height={50}
+        alt="Chingu Logo"
+        priority={false}
+      />
+      <h2 className=" font-semibold text-lg">Chingu</h2>
+    </div>
+  );
+}
diff --git a/src/components/navbar/DropDown.tsx b/src/components/navbar/DropDown.tsx
@@ -0,0 +1,22 @@
+import { ChevronDownIcon } from "@heroicons/react/24/outline";
+import DropDownLink from "./DropDownLink";
+
+export default function DropDown({ name }: { name: string }) {
+  return (
+    <div className="dropdown py-0 mx-2 dropdown-bottom">
+      <label
+        tabIndex={0}
+        className="btn m-0 p-0 bg-transparent border-none hover:border-none hover:bg-transparent"
+      >
+        {name} <ChevronDownIcon className="w-4" />
+      </label>
+      <ul
+        tabIndex={0}
+        className="dropdown-content z-[1] menu p-2 shadow bg-base-100 rounded-box right-0"
+      >
+        <DropDownLink title="Link 1" />
+        <DropDownLink title="404???" href="/hello404" />
+      </ul>
+    </div>
+  );
+}
diff --git a/src/components/navbar/DropDownLink.tsx b/src/components/navbar/DropDownLink.tsx
@@ -0,0 +1,19 @@
+import Link from "next/link";
+
+interface DropDownLinkProps {
+  title: string;
+  href?: string;
+}
+
+export default function DropDownLink({ title, href = "#" }: DropDownLinkProps) {
+  return (
+    <li>
+      <Link
+        href={href}
+        className="text-neutral hover:text-neutral-focus font-semibold  duration-200"
+      >
+        {title}
+      </Link>
+    </li>
+  );
+}
diff --git a/src/components/navbar/Navbar.tsx b/src/components/navbar/Navbar.tsx
@@ -0,0 +1,22 @@
+import { Avatar } from "@/components";
+import { Bell, ChinguMenu, DropDown } from "@/components/navbar";
+
+const name = "Yorick";
+const notificationCount = 4;
+
+export default function Navbar() {
+  return (
+    <nav className="navbar bg-primary h-8">
+      <div className="flex-1 pl-2">
+        <ChinguMenu />
+      </div>
+      <div>
+        <Bell notificationCount={notificationCount} />
+        <div className="px-2 ml-6 flex flex-row items-center">
+          <Avatar image="/avatar.png" height={34} width={34} />
+          <DropDown name={name} />
+        </div>
+      </div>
+    </nav>
+  );
+}
diff --git a/src/components/navbar/index.ts b/src/components/navbar/index.ts
@@ -0,0 +1,4 @@
+export { default as Bell } from "./Bell";
+export { default as ChinguMenu } from "./ChinguMenu";
+export { default as DropDown } from "./DropDown";
+export { default as DropDownLink } from "./DropDownLink";