import React, { FC, ReactNode } from 'react'
import DiscordLogo from './svg/DiscordLogo';
type Props = {}
const headerLinks = [
{
content: 'Download'
},
{
content: 'Nitro'
},
{
content: 'Discover'
},
{
content: 'Safety'
},
{
content: 'Support'
},
{
content: 'Blog'
},
{
content: 'Careers'
}
];
export const Header: FC<Props> = (props) => {
return (
<header>
<nav className='flex justify-between items-center bg-emerald-400 flex-row h-20'>
<DiscordLogo className='text-white' />
<ul className='flex flex-row'>
{headerLinks.map((link, index) => (
<HeaderLink key={index} content={link.content} className='text-white text-lg font-bold hover:underline underline-offset-1
p-3 mx-3'>
{link.content}
</HeaderLink>
))}
</ul>
<Button className='rounded-full bg-white text-black cursor-pointer
hover:shadow-lg
hover:text-blurple transition
duration-200 ease-in-out
'
>
Login
</Button>
</nav>
</header>
)
}
interface HeaderLinkProps {
children: ReactNode;
content: string;
className?: string;
}
const HeaderLink: FC<HeaderLinkProps> = ({ content, children, className }) => {
return (
<li className='px-4'>
<a href='#' className={`${className}`}>
{children}
</a>
</li>
)
}
import React, { FC, ReactNode } from 'react'
import DiscordLogo from './svg/DiscordLogo';
type Props = {}
const headerLinks = [
{
content: 'Download'
},
{
content: 'Nitro'
},
{
content: 'Discover'
},
{
content: 'Safety'
},
{
content: 'Support'
},
{
content: 'Blog'
},
{
content: 'Careers'
}
];
export const Header: FC<Props> = (props) => {
return (
<header>
<nav className='flex justify-between items-center bg-emerald-400 flex-row h-20'>
<DiscordLogo className='text-white' />
<ul className='flex flex-row'>
{headerLinks.map((link, index) => (
<HeaderLink key={index} content={link.content} className='text-white text-lg font-bold hover:underline underline-offset-1
p-3 mx-3'>
{link.content}
</HeaderLink>
))}
</ul>
<Button className='rounded-full bg-white text-black cursor-pointer
hover:shadow-lg
hover:text-blurple transition
duration-200 ease-in-out
'
>
Login
</Button>
</nav>
</header>
)
}
interface HeaderLinkProps {
children: ReactNode;
content: string;
className?: string;
}
const HeaderLink: FC<HeaderLinkProps> = ({ content, children, className }) => {
return (
<li className='px-4'>
<a href='#' className={`${className}`}>
{children}
</a>
</li>
)
}