feat: refactor ProjectHeader to ProjectInfo, update layout to include ProjectInfo component, and remove projectTitle prop

Co-authored-by: Drobinson1999 <Drobinson1999@users.noreply.github.com>

Author: BorDevTech

app/(Components)/Header.tsx

@@ -1,19 +1,43 @@
 "use client";
 
-import { HStack, Heading, Container } from "@chakra-ui/react";
+import {
+  HStack,
+  Heading,
+  Container,
+  useBreakpointValue,
+} from "@chakra-ui/react";
 import { ColorModeButton, useColorMode } from "@/components/ui/color-mode";
 
-export default function ProjectHeader({
-  projectTitle,
-}: {
-  projectTitle: string;
-}) {
+export default function ProjectInfo() {
+  const ProjectInfo = {
+    title: "OpenSignal",
+    navLinks: [
+      { name: "login", href: "/" },
+      { name: "Dashboard", href: "/dashboard" },
+    ],
+  };
+  const current = useBreakpointValue({
+    base: "base",
+    sm: "sm",
+    md: "md",
+    lg: "lg",
+    xl: "xl",
+    "2xl": "2xl",
+  });
+  const Title = "OpenSignal";
   const { colorMode } = useColorMode();
 
   return (
-    <Container h={"10vh"} position={"fixed"}>
+    <Container
+      h={"10vh"}
+      position={"fixed"}
+      zIndex={1}
+      _dark={{ bg: "black" }}
+      _light={{ bg: "white" }}
+    >
       <HStack alignItems={"center"} justifyContent={"space-between"} h={"100%"}>
-        <Heading size={"5xl"}>{projectTitle}</Heading>
+        <Heading size={"5xl"}>{Title}</Heading>
+
         <ColorModeButton
           size="sm"
           variant="subtle"

app/(User Dashboard)/dashboard/page.tsx

@@ -40,7 +40,6 @@ export default async function Home() {
 
   return (
     <Stack>
-      <ProjectHeader projectTitle="OpenSignal" />
       <Container maxW="container.md" py={8}>
         <Card.Root position="relative" p={8} mt={8}>
           {session ? (

app/layout.tsx

@@ -3,6 +3,9 @@ import { Geist, Geist_Mono } from "next/font/google";
 import "./globals.css";
 import { Provider } from "@/components/ui/provider";
 import { SessionProvider } from "next-auth/react";
+
+import ProjectInfo from "@/app/(Components)/Header";
+
 const geistSans = Geist({
   variable: "--font-geist-sans",
   subsets: ["latin"],
@@ -29,7 +32,10 @@ export default function RootLayout({
         className={`${geistSans.variable} ${geistMono.variable} antialiased`}
       >
         <SessionProvider>
-          <Provider>{children}</Provider>
+          <Provider>
+            <ProjectInfo />
+            {children}
+          </Provider>
         </SessionProvider>
       </body>
     </html>

app/page.tsx

@@ -12,7 +12,6 @@ export default async function Home() {
   if (session?.user) {
     return (
       <>
-        <ProjectHeader projectTitle={"OpenSignal"} />
         <Container h={"80vh"} bg={"blue.100"}>
           <AbsoluteCenter>
             <Card.Root>
@@ -45,7 +44,6 @@ export default async function Home() {
   }
   return (
     <>
-      <ProjectHeader projectTitle={"OpenSignal"} />
       <Container h={"80vh"} bg={"blue.100"}>
         <AbsoluteCenter>
           <Card.Root>