hngprojects · favouridoko1 · Jul 20, 2024 · Jul 21, 2024 · Jul 21, 2024 · Jul 20, 2024
diff --git a/app/components/Navbar/Navbar.tsx b/app/components/Navbar/Navbar.tsx
@@ -0,0 +1,60 @@
+
+import { getImages } from "~/lib/utils/utils";
+const Navbar = () => {
+  return (
+    <>
+      <div className="flex flex-col h-24 borderbtm">
+
+        <div className="flex justify-between mx-4">
+          <ul className="flex justify-between items-center gap-8">
+            <div className="flex items-center gap-3">
+              <li>
+                <img src={getImages[0].icon.imgLocation} alt="hamborger_icon" />
+              </li>
+
+              <li>
+                <img src={getImages[0].logo.imgLocation} alt="logo" />
+              </li>
+              <li className="font-semibold text-2xl">
+                <p>Boilerplate.</p>
+              </li>
+            </div>
+            <div className="flex gap-2 font-bold text-xs">
+              <li>Overview</li>
+              <li className="text-orange">Email</li>
+              <li>product</li>
+            </div>
+          </ul>
+          <ul className="flex items-center justify-between gap-4">
+            <li className="borderstyles relative">
+              <input
+                type="text"
+                className="px-7 h-10 focus:outline-0 font-light"
+                placeholder="Search Option..."
+              />
+              <img
+                src={getImages[0].search_icon.imgLocation}
+                alt=""
+                className="absolute top-3 left-2 outline-none"
+              />
+            </li>
+            <li>
+              <img src={getImages[0].bell.imgLocation} alt="" />
+            </li>
+            <li>
+              <img src={getImages[0].questionmark.imgLocation} alt="" />
+            </li>
+            <li>
+              <img src={getImages[0].avatar.imgLocation} alt="" />
+            </li>
+            <li>
+              <img src={getImages[0].dropdown_icon.imgLocation} alt="" />
+            </li>
+          </ul>
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default Navbar;
diff --git a/app/components/index.html b/app/components/index.html
@@ -0,0 +1,121 @@
+<!-- <!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Document</title>
+  </head>
+  <body style="font-family: 'Poppins', Arial, sans-serif">
+    <table width="100%" border="0" cellspacing="0" cellpadding="0" class="staticSiteContainer">
+      <tr>
+        <td align="center" style="padding: 20px">
+          <table
+            class="content"
+            width="600"
+            border="0"
+            cellspacing="0"
+            cellpadding="0"
+            style="border-collapse: collapse; border: 1px solid #cccccc"
+          >
+            <!-- Header -->
+            <tr>
+              <td
+                class="header"
+                style="
+                  background-color: #000000;
+                  padding: 40px;
+                  text-align: center;
+                  color: white;
+                  font-size: 24px;
+                "
+              >
+                <span style="border-bottom: 2px solid #ffffff">IB</span>OUND <span style="padding: 4px; background-color: #f56c6c;">22</span>
+              </td>
+            </tr>
+
+            <!-- Body -->
+            <tr>
+              <td
+                class="body"
+                style="
+                  padding: 40px;
+                  text-align: left;
+                  font-size: 16px;
+                  line-height: 1.6;
+                "
+              >
+                Hello, All! <br />
+                Lorem odio soluta quae dolores sapiente voluptatibus recusandae
+                aliquam fugit ipsam.
+                <br /><br />
+                Lorem ipsum dolor sit amet consectetur adipisicing elit. Veniam
+                corporis sint eum nemo animi velit exercitationem impedit.
+                Incidunt, officia facilis atque? Ipsam voluptas fugiat
+                distinctio blanditiis veritatis.
+              </td>
+            </tr>
+
+            <!-- Call to action Button -->
+            <tr>
+              <td style="padding: 0px 40px 0px 40px; text-align: center">
+                <!-- CTA Button -->
+                <table cellspacing="0" cellpadding="0" style="margin: auto">
+                  <tr>
+                    <td
+                      align="center"
+                      style="
+                        background-color: #345c72;
+                        padding: 10px 20px;
+                        border-radius: 5px;
+                      "
+                    >
+                      <a
+
+                        style="
+                          color: #ffffff;
+                          text-decoration: none;
+                          font-weight: bold;
+                          cursor:pointer;
+                        "
+                        >Register here</a
+                      >
+                    </td>
+                  </tr>
+                </table>
+              </td>
+            </tr>
+            <tr>
+              <td
+                class="body"
+                style="
+                  padding: 40px;
+                  text-align: left;
+                  font-size: 16px;
+                  line-height: 1.6;
+                "
+              >
+                Lorem ipsum dolor sit amet consectetur adipisicing elit. Veniam
+                corporis sint eum nemo animi velit exercitationem impedit.
+              </td>
+            </tr>
+            <!-- Footer -->
+            <tr>
+              <td
+                class="footer"
+                style="
+                  background-color: #333333;
+                  padding: 40px;
+                  text-align: center;
+                  color: white;
+                  font-size: 14px;
+                "
+              >
+                Copyright &copy; 2024 | Your brand name
+              </td>
+            </tr>
+          </table>
+        </td>
+      </tr>
+    </table>
+  </body>
+</html> -->
diff --git a/app/components/ui/alert-dialog.tsx b/app/components/ui/alert-dialog.tsx
@@ -1,14 +1,14 @@
 "use client";
 
 import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog";
-import { buttonVariants } from "app/components/ui/button";
 import { cn } from "app/lib/utils/cn";
 import {
   ComponentPropsWithoutRef,
   ElementRef,
   forwardRef,
   HTMLAttributes,
 } from "react";
+import { buttonVariants } from "./button";
 
 const AlertDialog = AlertDialogPrimitive.Root;
 

diff --git a/app/components/ui/button.tsx b/app/components/ui/button.tsx
@@ -35,7 +35,7 @@ const buttonVariants = cva(
 export interface ButtonProperties
   extends ButtonHTMLAttributes<HTMLButtonElement>,
     VariantProps<typeof buttonVariants> {
-  asChild?: boolean;
+  asChild?: boolean
 }
 
 const Button = forwardRef<HTMLButtonElement, ButtonProperties>(
@@ -52,4 +52,4 @@ const Button = forwardRef<HTMLButtonElement, ButtonProperties>(
 );
 Button.displayName = "Button";
 
-export { Button, buttonVariants };
+export { Button, buttonVariants }
diff --git a/app/lib/utils/cn.ts b/app/lib/utils/cn.ts
@@ -3,4 +3,5 @@ import { twMerge } from "tailwind-merge";
 
 export function cn(...inputs: ClassValue[]) {
   return twMerge(clsx(inputs));
+
 }
diff --git a/app/lib/utils/utils.ts b/app/lib/utils/utils.ts
@@ -0,0 +1,54 @@
+export const getImages = [
+  {
+    icon: {
+      id: 1,
+      type: "online auction site",
+      imgLocation: "../../../public/icon.png",
+    },
+    logo: {
+      id: 2,
+      type: "brand logo",
+      imgLocation: "../../../public/Logo.png",
+    },
+    bell: {
+      id: 3,
+      type: "notification bell",
+      imgLocation: "../../../public/notification.png",
+    },
+    questionmark: {
+      id: 4,
+      type: "question mark icon",
+      imgLocation: "../../../public/icon_que.png",
+    },
+    avatar: {
+      id: 5,
+      type: "avatar",
+      imgLocation: "../../../public/avatar.png",
+    },
+    dropdown_icon: {
+      id: 6,
+      type: "notification bell",
+      imgLocation: "../../../public/secondary_icon.png",
+    },
+    search_icon: {
+      id: 7,
+      type: "search icon",
+      imgLocation: "../../../public/search_icon.png",
+    },
+    note_icon: {
+      id: 7,
+      type: "note icon",
+      imgLocation: "../../../public/note_icon.png",
+    },
+    open_close: {
+      id: 7,
+      type: "note icon",
+      imgLocation: "../../../public/open_close.png",
+    },
+    arrow_right: {
+      id: 7,
+      type: "note icon",
+      imgLocation: "../../../public/arrow_right.png",
+    },
+  },
+];
diff --git a/app/root.tsx b/app/root.tsx
@@ -10,6 +10,7 @@ import {
 import type { ReactNode } from "react";
 
 import styles from "./styles/global.css?url";
+import Navbar from "./Components/Navbar/Navbar";
 
 export const links: LinksFunction = () => [
   { rel: "stylesheet", href: styles },
@@ -26,6 +27,10 @@ export function Layout({ children }: { children: ReactNode }) {
         <Links />
       </head>
       <body>
+        <header>
+
+
+        </header>
         {children}
         <ScrollRestoration />
         <Scripts />
Original file line number	Diff line number	Diff line change
Expand Up		@@ -3,4 +3,5 @@ import { twMerge } from "tailwind-merge";

		export function cn(...inputs: ClassValue[]) {
		return twMerge(clsx(inputs));

		}