Responsive React Navbar with Tailwind CSS

"use-client";-import-Link-from-"next/link";-import-React,-{-useState-}-from-"react";-import-{-FaBars,-FaTimes-}-from-"react-icons/fa";-import-logo-from-"@/public/logo.webp";-import-Image-from-"next/image";-type-Options-=-{-name:-string;-path:-string;-icon?:-React.ReactNode;-//-Optional-icon,-typically-a-JSX-element-};-type-NavbarProps-=-{-options:-Options[];-};-const-Navbar:-React.FC<NavbarProps>-=-({-options-})-=>-{-const-[isOpen,-setIsOpen]-=-useState(false);-const-toggleMenu-=-()-=>-{-setIsOpen(!isOpen);-};-const-handleLinkClick-=-()-=>-{-setIsOpen(false);-};-return-(-<nav-className="bg-accent-text-primary-foreground-p-4-shadow-sm">-<div-className="container-mx-auto">-<div-className="flex-items-center-justify-between">-{/*-Logo-Section-*/}-<div-className="flex-items-center-space-x-2">-<Image-src={logo}-alt="logo"-className="w-10-h-10-rounded-full-object-cover"-/>-<span-className="text-lg-font-bold-hidden-sm:block">Todo-App</span>-</div>-{/*-Desktop-Navigation-*/}-<div-className="hidden-md:flex-items-center-space-x-8">-{(options-||-[]).map((item)-=>-(-<Link-key={item.name}-href={item.path}-className="hover:text-primary-transition-colors-duration-200-flex-items-center"-onClick={handleLinkClick}->-{item.icon}-{item.name}-</Link>-))}-<button-className="bg-primary-hover:bg-primary/90-text-primary-foreground-px-6-py-2-rounded-md-transition-colors-duration-200">-Login-</button>-</div>-{/*-Mobile-Menu-Button-*/}-<button-className="md:hidden-text-2xl-focus:outline-none"-onClick={toggleMenu}-aria-label="Toggle-mobile-menu"->-{isOpen-?-<FaTimes-/>-:-<FaBars-/>}-</button>-</div>-{/*-Mobile-Navigation-*/}-{isOpen-&&-(-<div-className="md:hidden-mt-4-bg-accent-foreground-rounded-lg-p-4-space-y-4">-{(options-||-[]).map((item)-=>-(-<Link-key={item.name}-href={item.path}-className="block-hover:text-primary-transition-colors-duration-200-py-2"-onClick={handleLinkClick}->-{item.icon}-{item.name}-</Link>-))}-<button-className="w-full-bg-primary-hover:bg-primary/90-text-primary-foreground-px-6-py-2-rounded-md-transition-colors-duration-200">-Login-</button>-</div>-)}-</div>-</nav>-);-};-export-default-Navbar;--Mira-yo-quiero-distribuir-el-contenido-en-3-containers-el-primero-sera-1/5-del-ancho-del-nabvar,-el-segundo-sera-3/5-del-ancho-y-el-tercero-sera-1/5.-En-el-primer-container-quiero-solo-el-logo-con-el-texto-pero-quiero-que-debajo-del-logo-este-el-texto-y-que-no-tome-mas-del-ancho-de-la-imagen-del-texto-'Todo-App',-las-opciones-de-navegacion-estran-en-el-segundo-container-y-el-boton-de-login-en-el-ultimo-usa-tailwind-y-hazo-con-ciertos-contrastes-si-es-posible