v.korobtsev/next-enterprise
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat/getting-started-and-navbar

Browse source
This commit is contained in:
Abdullah Umar 2024-02-18 11:02:18 +05:00
parent c503bc8a2b
commit 29320c475e
9 changed files with 555 additions and 75 deletions
Download patch file Download diff file Expand all files Collapse all files

36
components/Navbar/Navbar.tsx Normal file
View file

@ -0,0 +1,36 @@
export default function Navbar() {
return (
<>
<nav className="bg-gray-200 shadow shadow-gray-300 w-100 px-8 md:px-auto">
<div className="md:h-16 h-28 mx-auto md:px-4 container flex items-center justify-between flex-wrap md:flex-nowrap">
<div className="text-indigo-500 md:order-1">
<svg xmlns="http://www.w3.org/2000/svg" className="h-10 w-10" fill="none" viewBox="0 0 24 24"
stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M9 3v2m6-2v2M9 19v2m6-2v2M5 9H3m2 6H3m18-6h-2m2 6h-2M7 19h10a2 2 0 002-2V7a2 2 0 00-2-2H7a2 2 0 00-2 2v10a2 2 0 002 2zM9 9h6v6H9V9z" />
</svg>
</div>
<div className="text-gray-500 order-3 w-full md:w-auto md:order-2">
<ul className="flex font-semibold justify-between">
<li className="md:px-4 md:py-2 text-indigo-500"><a href="#">Dashboard</a></li>
<li className="md:px-4 md:py-2 hover:text-indigo-400"><a href="#">Search</a></li>
<li className="md:px-4 md:py-2 hover:text-indigo-400"><a href="#">Explore</a></li>
<li className="md:px-4 md:py-2 hover:text-indigo-400"><a href="#">About</a></li>
<li className="md:px-4 md:py-2 hover:text-indigo-400"><a href="#">Contact</a></li>
</ul>
</div>
<div className="order-2 md:order-3">
<button className="px-4 py-2 bg-indigo-500 hover:bg-indigo-600 text-gray-50 rounded-xl flex items-center gap-2">
<svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M3 3a1 1 0 011 1v12a1 1 0 11-2 0V4a1 1 0 011-1zm7.707 3.293a1 1 0 010 1.414L9.414 9H17a1 1 0 110 2H9.414l1.293 1.293a1 1 0 01-1.414 1.414l-3-3a1 1 0 010-1.414l3-3a1 1 0 011.414 0z" clip-rule="evenodd" />
</svg>
<span>Login</span>
</button>
</div>
</div>
</nav>
</>
)
}