fix: Added Navbar Component in the layout. (#1712)

* Added `Navbar` Component in the layout. * made required changes --------- Co-authored-by: Priyankar Pal <[email protected]>
priyankarpal · Jul 16, 2023 · 84fd384 · 84fd384
1 parent e2ad174
commit 84fd384
Show file tree

Hide file tree

Showing 6 changed files with 57 additions and 68 deletions.
diff --git a/app/docs/page.tsx b/app/docs/page.tsx
@@ -2,7 +2,6 @@
 import { useEffect, ReactNode, useState } from "react";
 import SyntaxHighlighter from "react-syntax-highlighter";
 import { anOldHope } from "react-syntax-highlighter/dist/esm/styles/hljs";
-import { Navbar } from "@/components";
 import Image from "next/image";
 import { MdOutlineContentCopy } from "react-icons/md";
 import { BsCheck2Circle } from "react-icons/bs";
@@ -224,62 +223,59 @@ function AddYourProjectsGuide(): JSX.Element {
  ));
 
  return (
- <>
- <Navbar />
- <section className="relative isolate overflow-hidden px-6 py-24 sm:py-32 lg:overflow-visible lg:px-0">
- <div className="absolute inset-0 -z-10 overflow-hidden">
- <svg
- className="absolute left-[max(50%,25rem)] top-0 h-[64rem] w-[128rem] -translate-x-1/2 stroke-gray-500 [mask-image:radial-gradient(64rem_64rem_at_top,white,transparent)] opacity-20"
- aria-hidden="true"
- >
- <defs>
- <pattern
- id="e813992c-7d03-4cc4-a2bd-151760b470a0"
- width={180}
- height={180}
- x="50%"
- y={-1}
- patternUnits="userSpaceOnUse"
- >
- <path d="M100 180V.5M.5 .5H180" fill="none" />
- </pattern>
- </defs>
- <rect
- width="100%"
- height="100%"
- strokeWidth={0}
- fill="url(#e813992c-7d03-4cc4-a2bd-151760b470a0)"
- />
- </svg>
- </div>
- <div className="flex justify-center mt-10">
- <button
- className={`mx-2 px-4 py-2 rounded-lg mb-4 ${selectedOption === 0
- ? "bg-indigo-600 text-white"
- : "border border-gray-700 text-gray-300"
- }`}
- onClick={() => selectOption(0)}
- >
- Add Projects Directly From GitHub
- </button>
- <button
- className={`mx-2 px-4 py-2 rounded-lg mb-4 ${selectedOption === 1
- ? "bg-indigo-600 text-white"
- : "border border-gray-700 text-gray-300"
- }`}
- onClick={() => selectOption(1)}
- >
- Set Up Projects Locally
- </button>
- </div>
- <article className="items-center max-w-5xl mx-auto">
- <p className="mb-5 text-xl font-bold tracking-tight text-red-500">
- Follow the following steps to add your projects to ProjectsHut:
- </p>
- <div className="option">{stepsRender}</div>
- </article>
- </section>
- </>
+ <section className="relative isolate overflow-hidden px-6 py-24 sm:py-32 lg:overflow-visible lg:px-0">
+ <div className="absolute inset-0 -z-10 overflow-hidden">
+ <svg
+ className="absolute left-[max(50%,25rem)] top-0 h-[64rem] w-[128rem] -translate-x-1/2 stroke-gray-500 [mask-image:radial-gradient(64rem_64rem_at_top,white,transparent)] opacity-20"
+ aria-hidden="true"
+ >
+ <defs>
+ <pattern
+ id="e813992c-7d03-4cc4-a2bd-151760b470a0"
+ width={180}
+ height={180}
+ x="50%"
+ y={-1}
+ patternUnits="userSpaceOnUse"
+ >
+ <path d="M100 180V.5M.5 .5H180" fill="none" />
+ </pattern>
+ </defs>
+ <rect
+ width="100%"
+ height="100%"
+ strokeWidth={0}
+ fill="url(#e813992c-7d03-4cc4-a2bd-151760b470a0)"
+ />
+ </svg>
+ </div>
+ <div className="flex justify-center mt-10">
+ <button
+ className={`mx-2 px-4 py-2 rounded-lg mb-4 ${selectedOption === 0
+ ? "bg-indigo-600 text-white"
+ : "border border-gray-700 text-gray-300"
+ }`}
+ onClick={() => selectOption(0)}
+ >
+ Add Projects Directly From GitHub
+ </button>
+ <button
+ className={`mx-2 px-4 py-2 rounded-lg mb-4 ${selectedOption === 1
+ ? "bg-indigo-600 text-white"
+ : "border border-gray-700 text-gray-300"
+ }`}
+ onClick={() => selectOption(1)}
+ >
+ Set Up Projects Locally
+ </button>
+ </div>
+ <article className="items-center max-w-5xl mx-auto">
+ <p className="mb-5 text-xl font-bold tracking-tight text-red-500">
+ Follow the following steps to add your projects to ProjectsHut:
+ </p>
+ <div className="option">{stepsRender}</div>
+ </article>
+ </section>
  );
 }
 

diff --git a/app/layout.tsx b/app/layout.tsx
@@ -1,7 +1,7 @@
 import "./globals.css";
 import { Inter } from "next/font/google";
 import { MobileNavBar } from "@/components/MobileNavbar";
-import { Footer } from "@/components"
+import { Navbar, Footer } from "@/components";
 
 
 const inter = Inter({ subsets: ["latin"] });
@@ -20,6 +20,8 @@ export default function RootLayout({
  return (
  <html lang="en">
  <body className={inter.className} suppressHydrationWarning={true}>
+ <Navbar />
+
  {children}
 
  <MobileNavBar />

diff --git a/app/page.tsx b/app/page.tsx
@@ -3,12 +3,10 @@ import Link from "next/link";
 import Banner from "../components/Banner";
 import Image from "next/image";
 import images from "../DB/homepage-image.json";
-import { Navbar, } from "@/components";
 
 export default function HomePage() {
  return (
  <section>
- <Navbar />
  <div className="relative overflow-hidden">
  <div className="pt-16 sm:pt-24 sm:pb-40 lg:pt-40 lg:pb-48">
  <div className="relative mx-auto max-w-7xl px-4 sm:static sm:px-6 lg:px-8">

diff --git a/app/projects/[username]/page.tsx b/app/projects/[username]/page.tsx
@@ -17,7 +17,6 @@ import { IoClose } from "react-icons/io5";
 
 import projects from "../../../DB/projects.json";
 import Image from "next/image";
-import { Navbar } from "@/components";
 interface userType {
  bio?: string;
 }
@@ -91,8 +90,6 @@ function ProjectList() {
  };
 
  return (
- <>
- <Navbar />
  <section className="flex flex-col gap-4 md:flex-row xsm:my-2 p-4 md:p-8">
  {initialLoading}
  {/* Left side profile section */}
@@ -302,7 +299,6 @@ function ProjectList() {
  </div>
  )}{" "}
  </section>
- </>
  );
 }
 export default ProjectList;
diff --git a/app/projects/page.tsx b/app/projects/page.tsx
@@ -12,7 +12,6 @@ import { shuffleProjects } from "../../utils/paginate";
 import ProjectCard from "../../components/ProjectCard";
 import projects from "../../DB/projects.json";
 import { useRouter } from "next/navigation";
-import { Navbar } from "@/components";
 
 interface NewProjectsType {
  username: string;
@@ -203,8 +202,6 @@ const ProjectsPage: NextPage = () => {
  }
  };
  return (
- <>
- <Navbar />
  <section className="my-8 max-w-6xl w-11/12 mx-auto sm:my-10">
  <div className="text-[2.5rem] font-bold text-center text-white">
  Search for <span className="text-primary">cool </span> Projects
@@ -363,7 +360,6 @@ const ProjectsPage: NextPage = () => {
  )}
  </div>
  </section>
- </>
  );
 };
 

diff --git a/components/Navbar.tsx b/components/Navbar.tsx
@@ -1,3 +1,4 @@
+"use client";
 import React, { Suspense } from "react";
 import { NextPage } from "next";
 import Link from "next/link";