import { AiFillFire, AiFillHome, AiFillGithub } from "react-icons/ai"; import { BiPolygon } from "react-icons/bi"; import Link from "next/link"; const Navbar = () => { return ( <nav className="bg-purple-800"> <div className="max-w-7xl mx-auto px-2 sm:px-6 lg:px-8"> <div className="relative flex items-center justify-between h-16"> <div className="flex-1 flex items-center justify-center sm:items-stretch sm:justify-start"> <div className="sm:block"> <div className="flex space-x-4"> <div className="bg-gray-900 text-white hover:bg-gray-700 px-3 py-2 rounded-md text-md font-medium flex flex-row items-center" aria-current="page" > <Link href="/"> <a> <span className="inline-flex pr-2"> <AiFillHome /> </span> Home </a> </Link> </div> <div className="bg-gray-900 text-white hover:bg-gray-700 px-3 py-2 rounded-md text-md font-medium flex flex-row items-center" aria-current="page" > <Link href="/hotwalls"> <a> <span className="inline-flex pr-2"> <AiFillFire /> </span> Hot </a> </Link> </div> <div className="bg-gray-900 text-white hover:bg-gray-700 px-3 py-2 rounded-md text-md font-medium flex flex-row items-center"> <Link href="/newwalls"> <a> <span className="inline-flex pr-2"> <BiPolygon /> </span> New </a> </Link> </div> </div> </div> </div> <div className="absolute inset-y-0 right-0 flex items-center pr-2 sm:static sm:inset-auto sm:ml-6 sm:pr-0"> <div className="ml-3 relative"> <div className="hidden md:block bg-gray-900 text-white hover:bg-gray-700 px-3 py-2 rounded-md text-md font-medium flex flex-row items-center"> <Link href="/about"> <a>About</a> </Link> </div> </div> </div> </div> </div> </nav> ); }; export default Navbar;