Componente Navbar

Para tener un código más limpio y que luego sea mas fácil su mantenimiento y evolución yo hice lo siguiente:

// Cree un componente llamado NavItem que acepta las propiedades to, children y activeStyle
const NavItem = ({ to, children, activeStyle }) => {
  return (
    // Use la etiqueta NavLink y le pasé las propiedades to y className
    <NavLink
      to={to}
      className={({ isActive }) => (isActive ? activeStyle : undefined)}
    >
      {children}
    </NavLink>
  );
};

Y luego:

	 <li>
          <NavItem to="/clothes" activeStyle={activeStyle}>
            Clothes
          </NavItem>
        </li>
        <li>
          <NavItem to="/electronics" activeStyle={activeStyle}>
            Electronics
          </NavItem>
        </li>
        <li>
          <NavItem to="/fornitures" activeStyle={activeStyle}>
            Fornitures
          </NavItem>
        </li>
        <li>
          <NavItem to="/toys" activeStyle={activeStyle}>
            Toys
          </NavItem>
        </li>
        <li>
          <NavItem to="/others" activeStyle={activeStyle}>
            Others
          </NavItem>
        </li>

Ya vimos en el video la forma imperativa:
Les muestro una variante de forma mas declarativa:

1)Creamos 2 constantes que contengan un array con un objeto con las diferentes propiedades que gustemos

let menu1 = [
    {
        to: '/',
        text: 'Shopi',
        className: 'font-semibold text-lg'
    },
    {
        to: '/',
        text: 'All',
        className: ''
    },
    {
        to: '/clothes',
        text: 'clothes',
        className: ''
    },
    {
        to: '/electronics',
        text: 'electronics',
        className: ''
    },
    {
        to: '/furnitures',
        text: 'furnitures',
        className: ''
    },
    {
        to: '/toys',
        text: 'toys',
        className: ''
    },
    {
        to: '/others',
        text: 'others',
        className: ''
    },
]

let menu2 = [
    {
        to: '/email',
        text: '[email protected]',
        className: 'text-black/60'
    },
    {
        to: '/myorders',
        text: 'My orders',
        className: ''
    },
    {
        to: '/myoccount',
        text: 'My occount',
        className: ''
    },
    {
        to: '/signin',
        text: 'Sign in',
        className: ''
    },
    {
        to: '/shoppcar',
        text: '🛒',
        className: ''
    },
]

2)Recorremos y renderizamos con map el componente link.

const NavBar = () => {
    const textDecoration = 'underline underline-offset-4'

  return (
    <nav className="flex items-center justify-between w-full py-5 px-8 text-sm">
        <ul className='flex gap-3 items-center'>
            {menu1.map(link => (
                <li 
                    key={link.text}
                    className={link.className}
                >
                    <NavLink 
                        to={link.to}
                        className={({isActive})=> isActive ? textDecoration : undefined }
                    >
                        {link.text}
                    </NavLink>
                </li>
            ))}
        </ul>
        <ul className='flex gap-3 items-center'>
            {menu2.map(link => (
                <li 
                    key={link.text}
                    className={link.className}
                >
                    <NavLink 
                        to={link.to}
                        className={({isActive})=> isActive ? textDecoration : undefined }
                    >
                        {link.text}
                    </NavLink>
                </li>
            ))}
        </ul>
    </nav>
  )
}

Si utilizaron arreglos para abstraer la informacion de cada NavLink para su componente. Se van a dar cuenta que el primer y segundo elemento se subrayan, ya que ambos tienen la misma direccion. Una solucion para este problema es agregar una nueva condicion al classname del componente Navlink.

Con esta solucion el elemento Shopi no se va a subrayar.
El arreglo del menu se ve de la siguiente forma:

Los emoji salen oprimiendo la tecla windows y el punto al mismo tiempo !!!

Diferencias entre componentes: De react-router-dom
1)NavLink: Nos brinda un callback/funcion con un objeto con las propiedades: isActive y Pending. util para saber cuando un elemento esta activo o pendiente. su manera de uso popular es en los menu de navegacion, sin necesidad de recargar la pagina.

2)Link: No nos brinda nada y direcciona directamente a la ruta sin necesidad de recargar la pagina.

Mi resultado

Hola comunidad les comparto unos pequeños apuntes en Notion, espero les sean de utilidad.
Link aquí:

https://bg99astro.notion.site/Componente-Navbar-4e186ba4bcac4ec38a15e48dc1dc666f?pvs=4

En vez de hardcodear todos los navs cree un archivo que contenga todas las rutas (izq y der) para que sea dinámico y con un .map se recorrer todas y pegarlas

{componentsToNavRight.map((component, index) => (
• <NavLink to={component.path} className={({isActive}) => (isActive && index !==0) ? activeStyle : ''}> {component.name} </NavLink>
))}

• [email protected]
{componentsToNavLeft.map((component, index) => (
• <NavLink to={component.path} key={index}> {component.name} </NavLink>
))}
• Carrito de compra

Repeto el uso de TailwindCSS, creo que ayuda a muchos. Pero particularmente no me gusta como se vuleve un reguero de propiedades quitando la legibilidad de codigo de quien desarrolla!

A partir del curso anterior de React, quizá esto pueda ser más escalable.

1. Cree un componente NavItem:

function NavItem ({ className, to, activeStyle, navbarName }) {
  return (
    <li className={(className)}>
      <NavLink
        to={to}
        className={
          ({ isActive }) => (isActive ? activeStyle : undefined)
        }
      >
        {navbarName}
      </NavLink>
    </li>
  )
}

1. En el componente index.jsx, creamos un objeto con las siguientes propiedades:

const navItems = [
  { name: 'Shopi', to: '/', className: 'font-semibold text-xl' },
  { name: 'All', to: '/' },
  { name: 'Clothes', to: '/clothes' },
  { name: 'Electronics', to: '/electronics' },
  { name: 'Furnitures', to: '/furnitures' },
  { name: 'Toys', to: '/toys' },
  { name: 'Others', to: '/others' }
]

1. Recorremos:

function Navbar () {
  const activeStyle = 'underline'

  return (
    <nav className='flex items-center'>
      <ul className='flex items-center gap-3'>
        {
          navItems.map(({ to, className, name }) => (
            <NavItem
              key={name}
              to={to}
              className={className}
              navbarName={name}
              activeStyle={activeStyle}
            />
          ))
        }
      </ul>
    </nav>
  )
}

Siii… funciono en Produccion!! Chau Hashhh…
Genia Estefy!! Te amo… me salvaste !! si no tenia que emigrar a NExT 😃

Si tenes problemas con vite y tailwindcss https://tailwindcss.com/docs/guides/vite muestra como instalarlo.

        \<NavLink *to*="/" *className*="mr-8 font-bold text-base">          Shopi        \</NavLink>        {navLinks(categories)}      \

        \
• [email protected]\
        {navLinks(userLinks)}        \
• 🛒2\
      \

<NavLink to="/" className="mr-8 font-bold text-base"> Shopi </NavLink> {navLinks(categories)}

• [email protected]
{navLinks(userLinks)}
• 🛒2

Los filtros (ej: all, clothes), al ser menos complejos, los refactorice con un array para hacer más corto el NavBar:

const filtersRoutes = [
    "all",
    "clothes",
    "electronics",
    "furnitures",
    "toys",
    "others",
  ];

return (
	{filtersRoutes.map((route) => (
     	<li key={route}>
            <NavLink
              to={`/${route}`}
              className={({ isActive }) => (isActive ? activeStyle : undefined)}>
              {route.charAt(0).toUpperCase() + route.slice(1)}
            </NavLink>
      </li>
  ))}
)

Como aporte adicional al comentario de Alba Cecilia, acá tengo un ejemplo del mismo código pero hecho con Typescript.

const activeStyle = "underline underline-offset-4";

const NavLinkStyled: FC<{
  to: string;
  children: ReactNode;
  isLogo?: boolean;
}> = ({ children, to, isLogo }) => (
  <NavLink
    className={({ isActive }) =>
      isActive && !isLogo ? activeStyle : undefined
    }
    to={to}
  >
    {children}
  </NavLink>
);

La única diferencia es que mandé el estilo de activeStyle fuera de los componentes para no andarlo pasando como prop y adicional mandé una validación para no mostrar el underline en el logo.

asi quedaria con next 13 en un componente cliente, yo itero recorriendo un objeto rutas, pero tambien se puede cambiar para que las reciba como props.

Para tenerlo a la mano

//
const activeStyle = 'underline underline-offset-4'

// estilos para Nav Link
<NavLink 
	to = '/'
	className = {({  isActive  })  =>
		isActive  ?  activeStyle :  undefined
	}>
	All
</NavLink>

Genial que React-Router tenga de por si una propiedad
styles para el elemento NavLink
no lo tenia presente, sin duda uno aprende cosas nuevas,

           ` `
    <HandleLink navRoute='#'>            `` `` `[`[email protected]`](mailto:[email protected]) ` </HandleLink>           ` `
            ` ` <HandleLink navRoute='/my- total-orders' currentClass={currentClass}>              My Total Orders            </HandleLink>            ` ` <HandleLink navRoute='/my- account' currentClass={currentClass}>              My Account          ` ` </HandleLink>  ` ` <HandleLink navRoute='/sign-in' currentClass={currentClass}>              Sign In            ` `</HandleLink>            ` ` <HandleLink>             ` ` 🛒 0            ` ` </HandleLink>         ` `

{navItemList.map((item) => (
• <NavLink to={`/${item.category}`} activeStyle={activeStyle}> {item.category} </NavLink>
))}

{navRoutes.map((route)=>
• <NavLink to={route.path} className={({isActive})=> isActive ? activeStyle : "" }>{route.label}</NavLink>
)}

• [email protected]
{userRoutes.map((route)=>
• <NavLink to={route.path} className={({isActive})=> isActive ? activeStyle : "" }>{route.label}</NavLink>
)}

{routesA.map((route) => (
• <NavLink to={route.to} className={({ isActive }) => isActive && activeStyle} > {route.title} </NavLink>
))}

• [email protected]
{routesB.map((route) => (
• <NavLink to={route.to} className={({ isActive }) => isActive && activeStyle} > {route.title} </NavLink>
))}
• 🛒 0

{routeA.map((route) => (
• <NavLink to={route.to} style={({ isActive }) => (isActive ? activeStyle : undefined)} > {route.title} </NavLink>
))}

• [email protected]
{routeB.map((route) => (
• <NavLink to={route.to} style={({ isActive }) => (isActive ? activeStyle : undefined)} > {route.title} </NavLink>
))}
• 🛒 0

{routeA.map((route) => (
• <NavLink to={route.to} style={({ isActive }) => (isActive ? activeStyle : undefined)} > {route.title} </NavLink>
))}

• [email protected]
{routeB.map((route) => (
• <NavLink to={route.to} style={({ isActive }) => (isActive ? activeStyle : undefined)} > {route.title} </NavLink>
))}
• 🛒 0

{routesA.map((route) => (
• <NavLink to={route.to} style={({ isActive }) => (isActive ? activeStyle : undefined)} > {route.title} </NavLink>
))}

• [email protected]
{routesB.map((route) => (
• <NavLink to={route.to} style={({ isActive }) => (isActive ? activeStyle : undefined)} > {route.title} </NavLink>
))}
• 🛒 0

{routeA.map((route) => (
• <NavLink to={route.to} style={({ isActive }) => (isActive ? activeStyle : undefined)} > {route.title} </NavLink>
))}

• [email protected]
{routeB.map((route) => (
• <NavLink to={route.to} style={({ isActive }) => (isActive ? activeStyle : undefined)} > {route.title} </NavLink>
))}
• 🛒 0

• <NavLink to={"/"}>Shopi</NavLink>
{renderNavLinks(NAVLINKS_HOME)}

• [email protected]
{renderNavLinks(NAVLINKS_PLATFORM)}
• 🛒 0

• <NavLink to={"/"}>Shopi</NavLink>
{renderNavLinks(NAVLINKS_HOME)}

• [email protected]
{renderNavLinks(NAVLINKS_PLATFORM)}
• 🛒 0

        \
•           \<NavLink *to*={"/"}>Shopi\</NavLink>        \
        {renderNavLinks(NAVLINKS\_HOME)}      \

        \
• [email protected]\
        {renderNavLinks(NAVLINKS\_PLATFORM)}        \
• 🛒 0\
      \

{linksNavBar.map((data) => <NavLinkIcons data={data} key={data.label} />)}

{leftnav.map(({ to, text, className }) => { return (
• <NavLink to={to} className={text === 'Shope' ? '' : ({ isActive }) => NavLinkClass(isActive)}> {text} </NavLink>
) })}

{rightnav.map(({ to, text, className }) => { return (
• {to ? ( <NavLink to={to} className={({ isActive }) => NavLinkClass(isActive)}> {text} </NavLink> ) : ( <>{text} )}
) })}

        {leftnav.map(({ *to*, *text*, *className* }) => {          return (            \
•               \<NavLink to={*to*} className={*text* === 'Shope' ? '' : ({ *isActive* }) => NavLinkClass(*isActive*)}>                {*text*}              \</NavLink>            \
          )        })}      \

        {rightnav.map(({ *to*, *text*, *className* }) => {          return (            \
•               {*to* ? (                \<NavLink to={*to*} className={({ *isActive* }) => NavLinkClass(*isActive*)}>                  {*text*}                \</NavLink>              ) : (                <>{*text*}\              )}            \
          )        })}      \

• {navRoutes .map(({ name, path }, index) => ( <NavLink key={name} to={path} className={({ isActive }) => isActive && index !== 0 ? 'underline underline-offset-4 transition-all' : `${index === 0 ? 'font-semibold text-lg' : ''}` } > {name} </NavLink> )) .slice(0, 7)}

• [email protected]
• {navRoutes .map(({ name, path }) => ( <NavLink key={name} to={path}> {name} </NavLink> )) .slice(7, 10)}
• <IoCartOutline />

Teilwind me parece de lo más horrible que existe el código se ve súper sucio y desordenado, pero bueno, me lo tendré que aprender. 😞

Pueden ahorrarse un poco de codigo poniendo el className del NavLink dentro de una const de la siguiente manera:

Creamos la constante encima del return

 const handleActive = ({ isActive }) => isActive ? activeStyle : undefined

A cada <NavLink> le agregan la funcion

<li>
                    <NavLink
                        to='/'
                        className={handleActive}
                    >
                        All
                    </NavLink>
                </li>

Asi se veria el codigo completo

import { NavLink } from "react-router-dom"

const Navbar = () => {

    const activeStyle = 'underline underline-offset-4'

    const handleActive = ({ isActive }) => isActive ? activeStyle : undefined


    return (
        <nav className="flex justify-between items-center fixed z-10 w-full py-5 px-8 font-light">
            <ul className="flex items-center gap-3">
                <li className="font-semibold text-lg">
                    <NavLink
                        to='/'

                    >
                        Shopi
                    </NavLink>
                </li>
                <li>
                    <NavLink
                        to='/'
                        className={handleActive}
                    >
                        All
                    </NavLink>
                </li>
                <li>
                    <NavLink
                        to='/clothes'
                        className={handleActive}
                    >
                        Clothes
                    </NavLink>
                </li>
                <li>
                    <NavLink
                        to='/electronics'
                        className={handleActive}
                    >
                        Electronics
                    </NavLink>
                </li>
                <li>
                    <NavLink
                        to='/furnitures'
                        className={handleActive}
                    >
                        Furnitures
                    </NavLink>
                </li>
                <li>
                    <NavLink
                        to='/toys'
                        className={handleActive}
                    >
                        Toys
                    </NavLink>
                </li>
                <li>
                    <NavLink
                        to='/others'
                        className={handleActive}
                    >
                        Others
                    </NavLink>
                </li>
            </ul>

            <ul className="flex items-center gap-3">
                <li className="text-black/60">
                    [email protected]
                </li>
                <li>
                    <NavLink
                        to='/my-orders'
                        className={handleActive}
                    >
                        My Orders
                    </NavLink>
                </li>
                <li>
                    <NavLink
                        to='/my-account'
                        className={handleActive}
                    >
                        My Account
                    </NavLink>
                </li>
                <li>
                    <NavLink
                        to='/sign-in'
                        className={handleActive}
                    >
                        Sign in
                    </NavLink>
                </li>
                <li>
                    <NavLink
                        to='/No-Lo-He-Hecho'
                        className={handleActive}
                    >
                        🛒 0
                    </NavLink>
                </li>

            </ul>
        </nav>
    )
}

export default Navbar

Tef, mucha calidad, me encanta

Mi solución

import { NavLink } from "react-router-dom";

function Navbar() {
  const activeStyle = "underline underline-offset-4";

  return (
    <nav className="flex justify-between items-center fixed z-10 top-0 w-full py-5 px-8 text-sm font-light">
      
      <ul className="flex items-center gap-3">
        <li className="font-semibold text-lg">
          <NavLink to="/">Shopi</NavLink>
        </li>
        {routesLeft.map((route) => (
          <li key={route.to}>
            <NavLink
              to={route.to}
              className={({ isActive }) => (isActive ? activeStyle : undefined)}
            >
              {route.label}
            </NavLink>
          </li>
        ))}
      </ul>

      <ul className="flex items-center gap-3">
        <li className="text-black/60">[email protected]</li>
        {routesRight.map((route) => (
          <li key={route.to}>
            <NavLink
              to={route.to}
              className={({ isActive }) => (isActive ? activeStyle : undefined)}
            >
              {route.label}
            </NavLink>
          </li>
        ))}
        <li>🛒 0</li>
      </ul>
      
    </nav>
  );
}

const routesLeft = [];
routesLeft.push({ to: "/", label: "All" });
routesLeft.push({ to: "/clothes", label: "Clothes" });
routesLeft.push({ to: "/electronics", label: "Electronics" });
routesLeft.push({ to: "/furnitures", label: "Furnitures" });
routesLeft.push({ to: "/toys", label: "Toys" });
routesLeft.push({ to: "/others", label: "Others" });

const routesRight = [];
routesRight.push({ to: "/my-orders", label: "My Orders" });
routesRight.push({ to: "/my-account", label: "My Account" });
routesRight.push({ to: "/sing-in", label: "Sign In" });


export { Navbar };

Para que nos salga la ayuda de las clases de Tailwind CSS en VSCode solo debemos instalar la extension oficial de Tailwind CSS.

para hacer nuestro Navbar mobile-first simplemente podemos agregar estas lineas de código

flex flex-col sm:flex-row text-sm sm:text-lg

Otra forma de separar el estilo del los elementos visualmente:

const activeStyle = ({ isActive }) => isActive && "underline underline-offset-4";

<NavLink className={activeStyle} to={"/"}>
	Shopi
</NavLink>

mi componente <Navbar/> tratando de no repetir mucho el codigo y creando un componente aparte para los items de Navbar

En vista de que la fakeAPI de Platzi tiene errores, use la Fake Store por lo que tuve que traer sus categorias de la siguiente manera

const API = "https://fakestoreapi.com/products/categories";

const menus = ["my-orders", "my-account", "sign-in" ];

const activeStyle = "underline underline-offset-4";

const isActive = ({ isActive }) => (isActive ? activeStyle : undefined);

const Item = (object) => {
    return (
      <li key={object}>
        <NavLink to={`/${object}`} className={isActive}>
          {object}
        </NavLink>
      </li>
    );
};

Luego use esos metodos para renderizar las categorias

// **************************COMPONENT**************************
const NavBar = () => {
  const [categories, setCategories] = useState();

  useEffect(() => {
    fetch(API)
      .then(res => res.json())
      .then(data => setCategories(data))
  },[]);

  return (
    <nav className="flex justify-between items-center fixed z-10 top-0 w-full py-5 px-8 text-sm font-light">
      <ul className="flex items-center gap-3">
        <li className="font-semibold text-lg">
          <NavLink to="/">Shopi</NavLink>
        </li>

        {categories?.map(category => Item(category))}

      </ul>

      <ul className="flex items-center gap-3">
        <li className="text-black/60">[email protected]</li>

        {menus.map((menu) => Item(menu))};

        <li>🛒0</li>
      </ul>
    </nav>
  );
};

Primero cree objetos con las categorias y menus

const categories = [
  { name: "All", link: "/" },
  { name: "Clothes", link: "/clothes" },
  { name: "Electronics", link: "/electronics" },
  { name: "Furnitures", link: "/furnitures" },
  { name: "Toys", link: "/toys" },
  { name: "Others", link: "/others" },
];

const menus = [
  {name: "My Orders", link: "/my-orders"},
  {name: "My Account", link: "/my-account"},
  {name: "Sign In", link: "/sign-in"}
];

Luego cree dos funciones, una para el isActive y otra para crear los items del navbar

const activeStyle = "underline underline-offset-4";

const isActive = ({ isActive }) => isActive ? activeStyle : undefined; 

const Item = (object) => {
  return (
    <li key={object.name}>
      <NavLink
        to={object.link}
        className={isActive}
      >
        {object.name}
      </NavLink>
    </li>
  );
};

Luego renderizo el navbar haciendo map a los objetos y agregandolos al DOM con la funcion Item

const NavBar = () => {
  return (
    <nav className="flex justify-between items-center fixed z-10 w-full py-5 px-8 text-sm font-light">
      <ul className="flex items-center gap-3">
        <li className="font-semibold text-lg">
          <NavLink to="/">Shopi</NavLink>
        </li>

        {categories.map((category) => (
          Item(category)
        ))};

      </ul>

      <ul className="flex items-center gap-3">
        <li className="text-black/60">[email protected]</li>
        
        {menus.map((menu) => (
          Item(menu)
        ))};

        <li>🛒0</li>
      </ul>
    </nav>
  );
};

Este en mi archivo de NavBar

import React from 'react'
import {NavLink} from 'react-router-dom'

const navLinksLeft = [
    { to: '/', text: 'All' },
    { to: '/clothes', text: 'Clothes' },
    { to: '/electronics', text: 'Electronics' },
    { to: '/furniture', text: 'Furniture' },
    { to: '/toys', text: 'Toys' },
    { to: '/others', text: 'Others' },
]

const navLinksRight = [
    { to: '/my-orders', text: 'My orders' },
    { to: '/my-account', text: 'My account' },
    { to: '/sign-in', text: 'Sign in' },
]

function NavBar() {

    const activeStyle = 'underline underline-offset-4'

    return (
        <>
        <nav className='flex justify-between items-center fixed z-10 w-full py-5 px-8 text-sm font-light'>
            <ul className='flex items-center gap-3'>
                <li className='font-semibold text-lg'>
                    <NavLink to='/'>
                        Shopii
                    </NavLink>
                </li> 

                {navLinksLeft.map((link) => (
                    <li key={link.to}>
                        <NavLink 
                            to={link.to}
                            className={({ isActive }) => isActive ? activeStyle : 'undefined'}
                        >
                            {link.text}
                        </NavLink>
                    </li>
                ))}

            </ul>
            <ul className='flex items-center gap-3'>

                <li className='text-black/60'>
                    [email protected]
                </li>

                {navLinksRight.map((link) => (
                    <li key={link.to}>
                        <NavLink 
                            to={link.to}
                            className={({ isActive }) => isActive ? activeStyle : 'undefined'}
                        >
                            {link.text}
                        </NavLink>
                    </li>
                ))}

                <li>
                    C
                </li>
            </ul>
        </nav>
        </>
    )
} 

export { NavBar }

Me parece que de esta forma es menos codigo y espcialmente es más facil mantenerlo porque puedes modificar en un solo lugar (al hacer el .map) y cambiar a todos los elementos

Lo único loco que se me ocurrió para no repetir tanto code fué:
crear esta constante

const classlink = ({isActive}) => isActive ? activeStyle : undefined;

y ponerla en sus respectivas classes:

<li>
	<NavLink to='/'
              className = {classlink}>
                    All
        </NavLink>
</li>

Hoy estoy de poca inspiración xD!

Yo utilize map y clsx que es una pequeña utilidad (228B) para construir cadenas className condicionalmente.
También sirve como un reemplazo directo más rápido y más pequeño para el módulo de nombres de clase.
https://www.npmjs.com/package/clsx
Navbar.jsx

import { NavLink } from "react-router-dom";
import { menu1, menu2 } from "../data/menu";
import clsx from "clsx";

export const Navbar = () => {
  return (
    <nav className="flex items-center justify-between sticky z-10 w-full py-4 px-8 text-sm">
      <ul className="flex items-center gap-3">
        <li className="font-semibold text-lg">
          <NavLink to="/">Shopi</NavLink>
        </li>
        {menu1.map((list) => (
          <li key={list.id}>
            <NavLink
              to={list.to}
              className={({ isActive }) =>
                clsx(
                  "px-3 border",
                  isActive
                    ? "transition duration-500 rounded-xl border-green-400"
                    : "border-transparent"
                )
              }
            >
              {list.link}
            </NavLink>
          </li>
        ))}
      </ul>

      <ul className="flex items-center gap-3">
        <li className="text-black/60">
          <NavLink to="/">[email protected]</NavLink>
        </li>
        {menu2.map((list) => (
          <li key={list.id}>
            <NavLink
              to={list.to}
              className={({ isActive }) =>
                clsx(
                  "px-3 border",
                  isActive
                    ? "transition duration-500 rounded-xl border-green-400"
                    : "border-transparent"
                )
              }
            >
              {list.link}
            </NavLink>
          </li>
        ))}
      </ul>
    </nav>
  );
};

En una carpeta aparte llamada data cree el array del menu para poder iterar:

export const menu1 = [
  {
    id: 1,
    link: "All",
    to: "/",
  },
  {
    id: 2,
    link: "Clothes",
    to: "/clothes",
  },
  {
    id: 3,
    link: "Electronics",
    to: "/electronics",
  },
  {
    id: 4,
    link: "Furniture",
    to: "/furniture",
  },
  {
    id: 5,
    link: "Toys",
    to: "/toys",
  },
  {
    id: 6,
    link: "Others",
    to: "/others",
  },
];

export const menu2 = [
  {
    id: 1,
    link: "My orders",
    to: "/my-orders",
  },
  {
    id: 2,
    link: "My Account",
    to: "/my-account",
  },
  {
    id: 3,
    link: "Sign in",
    to: "/sign-in",
  },
  {
    id: 4,
    link: "🛒0",
    to: "/shopp-car",
  },
];

Para usar Navlink, se debe importar previamente desde react router dom

⭐ Dos estudiantes hiceron aportes interesantisimos sobre como podemos mostrar los elementos del [navbar] y darles el estilo de “underline”

Combine ambos aportes y este fue el resultado:

https://github.com/mt-alejo/pj-ecommerce-react/blob/main/src/Components/Navbar/index.jsx

Me encanto, gracias!

hasta aquí, ya voy aprendiendo algunas cosas nuevas. Gracias Teff

Excelente video estoy aprendiendo una parte importante que no sabia Gracias Estefany 😃 😁😎

Mi código hasta ahora, utilizando el método map y first child en tailwind:

import { NavLink } from "react-router-dom";

const Navbar = () => {
  const activeStyle = "underline underline-offset-4";

  const categories = [
    { to: "/", text: "Home" },
    { to: "/all", text: "All" },
    { to: "/clothes", text: "Clothes" },
    { to: "/furniture", text: "Furniture" },
    { to: "/toys", text: "Toys" },
  ];

  const routes = [
    { to: "/my-orders", text: "My Orders" },
    { to: "/my-account", text: "My Account" },
    { to: "/sign-in", text: "Sign In" },
  ];
  return (
    <nav className="flex justify-between items-center fixed z-10 w-full py-5 px-8 text-sm font-light">
      <ul className="flex items-center gap-3">
        {categories.map((category, index) => (
          <li key={index} className="first:font-semibold first:text-lg">
            <NavLink
              to={category.to}
              className={({ isActive }) => ` ${isActive ? activeStyle : ""}`}
            >
              {category.text}
            </NavLink>
          </li>
        ))}
      </ul>
      <ul className="flex items-center gap-3">
        <li className="text-black/60">[email protected]</li>
        {routes.map((route, index) => (
          <li key={index}>
            <NavLink
              to={route.to}
              className={({ isActive }) => ` ${isActive ? activeStyle : ""}`}
            >
              {route.text}
            </NavLink>
          </li>
        ))}
        <li>🛒2</li>
      </ul>
    </nav>
  );
};

export default Navbar;

Descarguen la extensión para tailwind que sugiere la profa.

Tailwind