|
@@ -0,0 +1,51 @@
|
|
|
|
+import {IoHome, IoPaperPlane} from "react-icons/io5";
|
|
|
|
+import {IoIosAddCircle, IoIosHeart} from "react-icons/io";
|
|
|
|
+import {Link} from "react-router-dom"
|
|
|
|
+const Header = () => {
|
|
|
|
+ return(
|
|
|
|
+ <nav className="flex mx-auto px-4 justify-between p-6 xl:container xls:mx-auto dark:bg-slate-900 dark:text-white">
|
|
|
|
+ {/* left */}
|
|
|
|
+ <div className="LogoBar flex items-center space-x-2 w-1/4">
|
|
|
|
+ <div>
|
|
|
|
+ <a>
|
|
|
|
+ <img src={'/src/img/logo.svg'} alt="logo"/>
|
|
|
|
+ </a>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ {/* middle */}
|
|
|
|
+ <div className="SearchBar w-1/2 sm:w-1/2 md:w-1/5 lg:w-1/4 xl:w-1/3">
|
|
|
|
+ <input className="rounded-full outline-none p-4 h-5 w-full text-grey bg-[#3A3B3C] sm:text-xs md:text-md lg:text-lg" type="text" placeholder="search"/>
|
|
|
|
+ </div>
|
|
|
|
+ {/* right */}
|
|
|
|
+ <div className="NavigationBar flex justify-between pl-2 w-2/5 items-center sm:w-1/2 sm:text-xs md:text-sm md:flex md:justify-between md:w-1/3 ">
|
|
|
|
+ <div className="group">
|
|
|
|
+ <div className="group-hover:bg-slate-800 group-hover:text-white group-hover:rounded-full" >
|
|
|
|
+ <Link to="/"><IoHome/></Link>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ <div className="group">
|
|
|
|
+ <div className="group-hover:bg-slate-800 group-hover:text-white group-hover:rounded-full">
|
|
|
|
+ <Link to="/direct"><IoPaperPlane/></Link>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ <div className="group">
|
|
|
|
+ <div className="group-hover:bg-slate-800 group-hover:text-white group-hover:rounded-full">
|
|
|
|
+ <Link to="/"><IoIosAddCircle/></Link>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ <div className="group">
|
|
|
|
+ <div className="group-hover:bg-slate-800 group-hover:text-white group-hover:rounded-full">
|
|
|
|
+ <Link to="/collections"><IoIosHeart/></Link>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ <div>
|
|
|
|
+ <Link to="/user">
|
|
|
|
+ <img className="rounded-full"alt="user"/>
|
|
|
|
+ </Link>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ </nav>
|
|
|
|
+ )
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+export default Header;
|