Skip to content

Instantly share code, notes, and snippets.

@Daltonic
Created July 22, 2022 09:06
Timeless NFT Header component
import { useGlobalState } from '../store'
import timelessLogo from '../assets/timeless.png'
import { connectWallet } from '../TimelessNFT'
const Header = () => {
const [connectedAccount] = useGlobalState('connectedAccount')
return (
<nav className="w-4/5 flex md:justify-center justify-between items-center py-4 mx-auto">
<div className="md:flex-[0.5] flex-initial justify-center items-center">
<img
className="w-32 cursor-pointer"
src={timelessLogo}
alt="Timeless Logo"
/>
</div>
<ul
className="md:flex-[0.5] text-white md:flex
hidden list-none flex-row justify-between
items-center flex-initial"
>
<li className="mx-4 cursor-pointer">Market</li>
<li className="mx-4 cursor-pointer">Artist</li>
<li className="mx-4 cursor-pointer">Features</li>
<li className="mx-4 cursor-pointer">Community</li>
</ul>
{!connectedAccount ? (
<button
className="shadow-xl shadow-black text-white
bg-[#e32970] hover:bg-[#bd255f] md:text-xs p-2
rounded-full cursor-pointer"
onClick={connectWallet}
>
Connect Wallet
</button>
) : (
<></>
)}
</nav>
)
}
export default Header
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment