Skip to content

Instantly share code, notes, and snippets.

@Ernesto-tha-great
Created June 17, 2022 16:24
Show Gist options
  • Save Ernesto-tha-great/e86e907206e3e294d68dda9f30235002 to your computer and use it in GitHub Desktop.
Save Ernesto-tha-great/e86e907206e3e294d68dda9f30235002 to your computer and use it in GitHub Desktop.
import * as React from "react";
import Image from "next/image";
import { useCelo } from '@celo/react-celo';
import { truncateAddress} from "@/utils";
import {HiMenuAlt4 } from 'react-icons/hi'
import {AiOutlineClose} from 'react-icons/ai'
import logo from "@/public/superday.png"
interface NavbarProps {
title: string;
classProps?: string;
}
const NavbarItem = ({title, classProps}: NavbarProps) => {
return (
<li className={`mx-4 cursor-pointer ${classProps}`}>
<span>{title}</span>
</li>
)
}
export function Header() {
const { address, connect, kit } = useCelo();
const [toggleMenu, setToggleMenu] = React.useState(false)
return (
<nav className='w-full flex md:justify-center justify-between items-center p-4'>
<div className='md:flex-[0.5] flex-initial justify-center items-center'>
<Image src={logo} alt='logo' width={62} height={42}/>
</div>
<ul className='text-white md:flex hidden list-none flex-row justify-between items-center flex-initial'>
{['Create', 'Pledge', 'Claim', 'Refund'].map((item, index) => (
<NavbarItem title={item} key={index} />
))}
{!address ? (
<button onClick={() => connect().catch(e => console.log(e))} className='bg-[#2952e3] py-2 px-7 mx-4 rounded-full cursor-pointer hover:bg-[#2546bd]'>
Login
</button>
) : (
<li className='bg-[#2952e3] py-2 px-7 mx-4 rounded-full cursor-pointer hover:bg-[#2546bd]'>
{truncateAddress(address)}
</li>
)}
</ul>
<div className='flex relative '>
{toggleMenu
? <AiOutlineClose fontSize={28} className='text-white md:hidden cursor-pointer' onClick={() => setToggleMenu(false)}/>
: <HiMenuAlt4 fontSize={28} className='text-white md:hidden cursor-pointer' onClick={() => setToggleMenu(true)}/>}
{toggleMenu &&
<ul
className='z-10 fixed top-0 -right-2 p-3 w-[70vw] h-screen shadow-2xl md:hidden list-none flex
flex-col justify-start items-end rounded-md blue-glassmorphism text-white animate-slide-in
'
>
<li className='text-xl w-full my-2'>
<AiOutlineClose onClick={() => setToggleMenu(false)} />
</li>
{['Market', 'Exchange', 'Tutorials', 'Wallets'].map((item, index) => (
<NavbarItem title={item} classProps='my-2 text-lg' key={index}/>
))}
</ul>
}
</div>
</nav>
);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment