Created
July 7, 2022 12:35
-
-
Save muhammadzaky15/afc2c7478fd5a75d7199aefaadf4a715 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import { ShoppingCartOutlined, UserOutlined, SearchOutlined, DownOutlined } from "@ant-design/icons"; | |
const MainMenu = (props) => { | |
return (<li className="inline-flex items-center"> | |
{props.title} | |
{props.icon && <DownOutlined className="text-xs ml-1.5 text-green-500"/>} | |
</li>) | |
} | |
const Layout = function (props) { | |
return ( | |
<div className="container mx-auto"> | |
{/* top menu*/} | |
<div className="flex justify-between border-b border-slate-300 py-2 text-sm"> | |
<div className="flex gap-8"> | |
<a href="https://www.google.com/" className="text-green-500"> | |
Chat with us | |
</a> | |
<p>+62 852 7069 9263</p> | |
<p>zaky@gmail.com</p> | |
</div> | |
<div className=""> | |
<ul className="flex gap-8 text-green-500 cursor-pointer"> | |
<li>Blog</li> | |
<li>About Us</li> | |
<li>Login</li> | |
</ul> | |
</div> | |
</div> | |
{/* logo dan search */} | |
<div className="flex justify-between py-10"> | |
<h1 className="text-3xl font-bold">LeumangShop</h1> | |
<div className="flex w-6/12 justify-center"> | |
<input | |
type="text" | |
className="bg-gray-100 w-full rounded-xl border-2 border-gray-300 pl-3 py-1 " | |
placeholder="Search Products, categories ..." | |
/> | |
<SearchOutlined className="text-2xl -ml-8"/> | |
</div> | |
<div className="flex gap-5"> | |
<UserOutlined className="text-3xl" /> | |
<div className="flex relative"> | |
<ShoppingCartOutlined className="text-3xl" /> | |
<div className="absolute -bottom-1 -left-1 text-xs bg-red-500 rounded-full w-4 h-4 text-white pl-1 font-bold"> | |
4 | |
</div> | |
</div> | |
</div> | |
</div> | |
{/* main menu */} | |
<div className="flex justify-between mt-0 bg-gray-100 py-2 pl-6"> | |
<ul className="flex gap-14 items-center font-semibold"> | |
<MainMenu title="Bakery" icon={true} /> | |
<MainMenu title="Fruit & Vegetable" icon={true} /> | |
<MainMenu title="Meat & Fish" icon={true} /> | |
<MainMenu title="Drink" icon={true} /> | |
<MainMenu title="Kitchen" icon={false} /> | |
<MainMenu title="Baby" icon={false} /> | |
</ul> | |
</div> | |
{props.children} | |
{/* footer */} | |
<div className="flex justify-between mb-8"> | |
<div className=""> | |
<h2 className="font-bold mb-4">Get in touch</h2> | |
<ul className="text-sm text-green-600"> | |
<li className="mb-2">About Us</li> | |
<li className="mb-2">Careers</li> | |
<li className="mb-2">Press Releases</li> | |
<li className="mb-2">Blog</li> | |
</ul> | |
</div> | |
<div className=""> | |
<h2 className="font-bold mb-4">Connections</h2> | |
<ul className="text-sm text-green-600"> | |
<li className="mb-2">Facebook</li> | |
<li className="mb-2">Twitter</li> | |
<li className="mb-2">Instagram</li> | |
<li className="mb-2">Youtube</li> | |
<li className="mb-2">LinkedIn</li> | |
</ul> | |
</div> | |
<div className=""> | |
<h2 className="font-bold mb-4">Earnings</h2> | |
<ul className="text-sm text-green-600"> | |
<li className="mb-2">Become an Affiliate</li> | |
<li className="mb-2">Advertise your product</li> | |
<li className="mb-2">Sell on Market</li> | |
</ul> | |
</div> | |
<div className=""> | |
<h2 className="font-bold mb-4">Account</h2> | |
<ul className="text-sm text-green-600"> | |
<li className="mb-2">Your account</li> | |
<li className="mb-2">Return Center</li> | |
<li className="mb-2">100 % purchase protection</li> | |
<li className="mb-2">Chat with us</li> | |
<li className="mb-2">Help</li> | |
</ul> | |
</div> | |
</div> | |
{/* copyright */} | |
<div className="mb-10"> | |
<h4>Copyright © 2022 petrbilek.com</h4> | |
</div> | |
</div> | |
) | |
} | |
export default Layout; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment