Merge pull request #162 from Actualiza-Tu-Carro/categories_navbar

Added categories section in the navbar

.gitignore

@@ -4,7 +4,7 @@
 /node_modules
 /.pnp
 .pnp.js
-
+.env
 # testing
 /coverage
 

src/app/container_page.tsx

@@ -1,5 +1,8 @@
+'use client'
 import Footer from '~/components/footer/Footer';
 import NavBar from '~/components/navBar/navBar';
+import Categories from '~/components/categories/categories';
+import { usePathname } from 'next/navigation';
 
 type ContainerPageProps = {
   children: React.ReactNode;
@@ -14,11 +17,15 @@ export function ContainerPage({
   footer = true,
   children,
 }: ContainerPageProps) {
+  const pathname = usePathname();
   return (
     <>
       {typeof nav === 'boolean' && nav ? <NavBar /> : nav}
       {header && header}
-      <main className="min-h-screen overflow-hidden mx-auto">{children}</main>
+      <main className="min-h-screen overflow-hidden mx-auto">
+        {pathname !== '/' && <Categories />}
+        {children}
+      </main>
       {footer && <Footer />}
     </>
   );

src/app/layout.tsx

@@ -1,17 +1,13 @@
 'use client';
 import './globals.css';
-import type { Metadata } from 'next';
+
 import { Inter } from 'next/font/google';
 
 import { AuthContextProvider } from '../context/AuthContext';
 import { ThemeProvider } from 'next-themes';
 
 const inter = Inter({ subsets: ['latin'] });
 
-export const metadata: Metadata = {
-  title: 'Create Next App',
-  description: 'Generated by create next app',
-};
 
 export default function RootLayout({
   children,

src/app/products/page.tsx

@@ -2,6 +2,5 @@ import { ContainerPage } from '../container_page';
 
 export default function Landing() {
   return <ContainerPage>
-    Products page
   </ContainerPage>;
 }

src/components/categories/categories.tsx

@@ -0,0 +1,17 @@
+const Categories = () => {
+    return(
+        <div className="hidden w-full h-[60px] md:block mt-16 bg-opacity-70 bg-white shadow">
+            <ul className="flex justify-around items-center w-full h-full font-medium">
+                <li>Repuestos</li>
+                <li>Exterior</li>
+                <li>Bombillos</li>
+                <li>Farolas</li>
+                <li>Stops</li>
+                <li>Exploradoras</li>
+                <li>Audio</li>
+                <li>Interior</li>
+            </ul>
+        </div>
+    )
+}
+export default Categories;

src/components/navBar/navBar.tsx

@@ -24,7 +24,7 @@ const NavBar: FC<NavBarProps> = ({}) => {
   return (
     <nav>
       <div className="z-50 fixed top-0 bg-opacity-70 bg-white w-full backdrop-blur-sm flex-col shadow-sm">
-        <div className="p-4 flex items-center h-[60px] justify-between mx-auto">
+        <div className="p-4 flex items-center h-[60px] justify-between mx-auto my-1">
           {/* Contenedor lado izquierdo menu hamburguesa-imagenes*/}
           <div className="flex items-center gap-2">
             {/* Icono hamburguesa */}
@@ -68,7 +68,7 @@ const NavBar: FC<NavBarProps> = ({}) => {
             <div className="flex items-center justify-center ">
               <InputField
                 style={{ width: '50vw' }}
-                className="shadow-md bg-opacity-70 bg-white "
+                className="bg-opacity-70 bg-white "
                 placeholder="Buscar Productos"
                 leftIcon={<Icon icon="SearchIcon" />}
               />

src/types/icons.d.ts

@@ -1 +1 @@
-export type IconTypes = | 'CardCredit' | 'CarShoping' | 'Cash' | 'Close' | 'Facebook' | 'HamburguerClose' | 'HamburguerOpen' | 'Heart' | 'icon' | 'Instagram' | 'Login' | 'MapLocation' | 'Moon' | 'quotationMarks' | 'SearchIcon' | 'Shield' | 'Sun' | 'Truck' | 'warranty' | 'Whatsapp' 
+export type IconTypes = | 'CarShoping' | 'CardCredit' | 'Cash' | 'Close' | 'Facebook' | 'HamburguerClose' | 'HamburguerOpen' | 'Heart' | 'Instagram' | 'Login' | 'MapLocation' | 'Moon' | 'SearchIcon' | 'Shield' | 'Sun' | 'Truck' | 'Whatsapp' | 'icon' | 'quotationMarks' | 'warranty'