simple navbar made with color change

This commit is contained in:
Jacob Delgado 2023-10-20 22:45:19 -07:00
parent d8c8bd7667
commit 14f6efc2c5
6 changed files with 1681 additions and 3 deletions

View File

@ -0,0 +1,33 @@
import React from "react";
import Link from "next/link";
import Image from "next/image";
import Jefes from "../../../public/jefes_logo.jpg";
const NavBar = () => {
// Create an array to hold the list items
const links = [
{ label: "Dashboard", href: "/" },
{ label: "Issues", href: "/" },
];
return (
<nav className="flex gap-4 border-b mb-5 px-5 h-14 items-center">
<Link href="/">
<Image src={Jefes} width={50} height="auto" alt="Logo" />
</Link>
<ul className="flex gap-4 hover:cursor-pointer">
{links.map((link) => (
<Link
key={link.href}
className="text-zinc-500 hover:text-zinc-800"
href={link.href}
>
{link.label}
</Link>
))}
</ul>
</nav>
);
};
export default NavBar;

View File

@ -13,6 +13,6 @@
}
body {
padding: 1rem;
color: black;
}

View File

@ -1,6 +1,7 @@
import type { Metadata } from 'next'
import { Inter } from 'next/font/google'
import './globals.css'
import NavBar from './components/NavBar/NavBar'
const inter = Inter({ subsets: ['latin'] })
@ -16,7 +17,10 @@ export default function RootLayout({
}) {
return (
<html lang="en" data-theme="winter">
<body className={inter.className}>{children}</body>
<body className={inter.className}>
<NavBar />
<main>{children}</main>
</body>
</html>
)
}

View File

@ -1,4 +1,3 @@
import Image from 'next/image';
import Link from 'next/link';
import ProductCard from './components/ProductCard/ProductCard';

Binary file not shown.

After

Width:  |  Height:  |  Size: 203 KiB

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 581 KiB