feat: start over and layout
This commit is contained in:
@@ -0,0 +1,50 @@
|
||||
import Typography from '@/components/ui/Typography'
|
||||
import { css } from '@/styled-system/css'
|
||||
import { Container } from '@/styled-system/jsx'
|
||||
import { faChevronRight, faHeart } from '@fortawesome/free-solid-svg-icons'
|
||||
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
|
||||
import NextLink from 'next/link'
|
||||
import { type FC } from 'react'
|
||||
|
||||
const Footer: FC = () => {
|
||||
return (
|
||||
<footer
|
||||
className={css({
|
||||
backgroundColor: 'surface',
|
||||
color: 'text',
|
||||
paddingY: 'medium'
|
||||
})}
|
||||
>
|
||||
<Container
|
||||
className={css({
|
||||
display: 'grid',
|
||||
gridTemplateColumns: { base: 'repeat(3, 1fr)', mdDown: '1fr' }
|
||||
})}
|
||||
>
|
||||
<div>
|
||||
<Typography variant="h3" component='div'> Acerca de </Typography>
|
||||
<ul className="fa-ul">
|
||||
<li><FontAwesomeIcon icon={faChevronRight} listItem fixedWidth /><NextLink href="/acerca-de"> EntGamers</NextLink></li>
|
||||
<li><FontAwesomeIcon icon={faChevronRight} listItem fixedWidth /><NextLink href="/clanes"> Clanes</NextLink></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<Typography variant="h3" component='div'> Contacto </Typography>
|
||||
</div>
|
||||
<div></div>
|
||||
</Container>
|
||||
<Container
|
||||
className={css({
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center'
|
||||
})}
|
||||
>
|
||||
<Typography variant="body2" component='div'>
|
||||
Hecho con <FontAwesomeIcon className={css({ color: 'red' })} icon={faHeart} /> por <a href="https://srjuggernaut.dev">SrJuggernaut</a>
|
||||
</Typography>
|
||||
</Container>
|
||||
</footer>
|
||||
)
|
||||
}
|
||||
export default Footer
|
||||
@@ -0,0 +1,80 @@
|
||||
'use client'
|
||||
import EntGamers from '@/assets/logos/EntGamers'
|
||||
import Menu from '@/components/layout/Menu'
|
||||
import { css } from '@/styled-system/css'
|
||||
import { Container } from '@/styled-system/jsx'
|
||||
import NextLink from 'next/link'
|
||||
import { useCallback, useEffect, useState, type FC } from 'react'
|
||||
|
||||
const Header: FC = () => {
|
||||
const [isScrolled, setIsScrolled] = useState(typeof window !== 'undefined' ? window.scrollY > 0 : false)
|
||||
const handleScroll = useCallback(() => {
|
||||
if (typeof window === 'undefined') return
|
||||
console.log(window.scrollY)
|
||||
setIsScrolled(window.scrollY > 0)
|
||||
}, [])
|
||||
useEffect(() => {
|
||||
if (typeof window === 'undefined') return
|
||||
window.addEventListener('scroll', handleScroll)
|
||||
return () => {
|
||||
window.removeEventListener('scroll', handleScroll)
|
||||
}
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<>
|
||||
<header
|
||||
className={css({
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
backgroundColor: 'transparent',
|
||||
color: 'text',
|
||||
minHeight: '60px',
|
||||
position: 'fixed',
|
||||
top: 0,
|
||||
left: 0,
|
||||
width: '100%',
|
||||
zIndex: 'sticky',
|
||||
boxShadow: 'none',
|
||||
transitionProperty: 'background-color, box-shadow',
|
||||
transitionDuration: '0.25s',
|
||||
transitionTimingFunction: 'easeInOut',
|
||||
willChange: 'background-color, box-shadow',
|
||||
'&[data-scrolled=true]': {
|
||||
backgroundColor: 'surface',
|
||||
boxShadow: '2px 2px 4px 0px rgba(0, 0, 0, 0.25)'
|
||||
}
|
||||
})}
|
||||
data-scrolled={isScrolled}
|
||||
>
|
||||
<Container
|
||||
className={css({
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'space-between'
|
||||
})}
|
||||
>
|
||||
<div>
|
||||
<NextLink
|
||||
href="/"
|
||||
>
|
||||
<EntGamers
|
||||
width="40px"
|
||||
/>
|
||||
</NextLink>
|
||||
</div>
|
||||
<div>
|
||||
<Menu />
|
||||
</div>
|
||||
</Container>
|
||||
</header>
|
||||
<div
|
||||
className={css({
|
||||
height: '60px'
|
||||
})}
|
||||
/>
|
||||
</>
|
||||
)
|
||||
}
|
||||
export default Header
|
||||
@@ -0,0 +1,121 @@
|
||||
import BackDrop from '@/components/ui/BackDrop'
|
||||
import { css } from '@/styled-system/css'
|
||||
import { iconButton } from '@/styled-system/recipes'
|
||||
import { type IconDefinition } from '@fortawesome/fontawesome-common-types'
|
||||
import { faBars, faHome, faTimes } from '@fortawesome/free-solid-svg-icons'
|
||||
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
|
||||
import { usePathname } from 'next/navigation'
|
||||
import { useCallback, useState, type FC } from 'react'
|
||||
|
||||
interface MenuLink {
|
||||
label: string
|
||||
href: string
|
||||
icon: IconDefinition
|
||||
}
|
||||
|
||||
const menuLinks: MenuLink[] = [
|
||||
{ label: 'Home', href: '/', icon: faHome },
|
||||
{ label: 'About', href: '/about', icon: faHome },
|
||||
{ label: 'Contact', href: '/contact', icon: faHome }
|
||||
]
|
||||
|
||||
const Menu: FC = () => {
|
||||
const [isMenuOpen, setIsMenuOpen] = useState(false)
|
||||
const pathName = usePathname()
|
||||
const handleClickAway = useCallback(() => {
|
||||
setIsMenuOpen(false)
|
||||
}, [])
|
||||
return (
|
||||
<>
|
||||
<button
|
||||
className={iconButton({
|
||||
color: 'primary'
|
||||
})}
|
||||
onClick={() => { setIsMenuOpen(!isMenuOpen) }}
|
||||
>
|
||||
<FontAwesomeIcon icon={faBars} />
|
||||
</button>
|
||||
<BackDrop
|
||||
onClickAway={handleClickAway}
|
||||
isOpen={isMenuOpen}
|
||||
>
|
||||
<div
|
||||
className={css({
|
||||
position: 'fixed',
|
||||
top: 0,
|
||||
right: 0,
|
||||
width: { base: '250px', smDown: '100%' },
|
||||
height: '100%',
|
||||
backgroundColor: 'surface',
|
||||
zIndex: 'modal'
|
||||
})}
|
||||
>
|
||||
<div
|
||||
className={css({
|
||||
height: '60px',
|
||||
borderBottom: '1px solid',
|
||||
borderColor: 'border',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'right',
|
||||
padding: '0 1rem'
|
||||
})}
|
||||
>
|
||||
<button
|
||||
className={iconButton({
|
||||
color: 'danger'
|
||||
})}
|
||||
onClick={() => { setIsMenuOpen(!isMenuOpen) }}
|
||||
>
|
||||
<FontAwesomeIcon icon={faTimes} />
|
||||
</button>
|
||||
</div>
|
||||
<nav>
|
||||
<ul
|
||||
className={css({
|
||||
listStyle: 'none',
|
||||
padding: 0,
|
||||
margin: 0
|
||||
})}
|
||||
>
|
||||
{menuLinks.map((menuLink, index) => (
|
||||
<li
|
||||
key={`menu-link-${index}`}
|
||||
>
|
||||
<a
|
||||
className={css({
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'left',
|
||||
padding: '1rem',
|
||||
textDecoration: 'none',
|
||||
backgroundColor: 'transparent',
|
||||
color: 'text',
|
||||
transitionProperty: 'background-color',
|
||||
transitionDuration: 'normal',
|
||||
transitionTimingFunction: 'easeInOut',
|
||||
willChange: 'background-color color',
|
||||
'&:hover': {
|
||||
backgroundColor: 'primary',
|
||||
color: 'primary.contrast'
|
||||
},
|
||||
'&[data-active=true]': {
|
||||
backgroundColor: 'info',
|
||||
color: 'info.contrast'
|
||||
}
|
||||
})}
|
||||
href={menuLink.href}
|
||||
data-active={pathName === menuLink.href}
|
||||
>
|
||||
<FontAwesomeIcon icon={menuLink.icon} fixedWidth /> {menuLink.label}
|
||||
</a>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</BackDrop>
|
||||
</>
|
||||
)
|
||||
}
|
||||
export default Menu
|
||||
Reference in New Issue
Block a user