Files
filc-archive/Sites/filcnaplo.hu/lib/components/footer.tsx
2024-05-14 18:05:02 +02:00

68 lines
2.0 KiB
TypeScript

import DiscordIcon from './icons/discord.svg'
import InstagramIcon from './icons/instagram.svg'
import GithubIcon from './icons/github.svg'
import Image from 'next/image'
const connections: any[][] = [
[
'https://instagram.com/filc_club',
'Instagram',
<InstagramIcon key='instagram' />
],
['https://github.com/filc', 'Github', <GithubIcon key='github' />],
['https://filcnaplo.hu/discord', 'Discord', <DiscordIcon key='discord' />]
]
export default function Footer () {
return (
<>
<div
className='flex w-screen flex-col justify-end mt-32 p-12 sm:h-64 gap-4'
style={{
background: 'linear-gradient(180deg, #0B5342 0%, #01342D 100%)'
}}
>
<div className='flex items-center gap-6'>
<div className='lg:w-auto'>
<Image
src='/img/logo.svg'
alt='logo'
height={48}
width={48}
style={{ borderRadius: 16 }}
/>
</div>
<span
className='font-bold text-2xl sm:text-4xl'
style={{ color: '#E8FFFB' }}
>
Filc Napló
</span>
</div>
<div className='flex flex-col sm:flex-row justify-between items-center gap-4'>
<span className='text-gray-300 text-center sm:text-left'>
Website design made by Xou, Copyright {new Date().getFullYear()}{' '}
Filc Napló
</span>
<div className='flex'>
{connections.map((e: any[]) => {
return (
<div
className='px-4 py-2 ml-2 rounded-full h-8'
style={{
background: '#C5F5EC'
}}
key={e[0]}
onClick={() => window.open(e[0], '_blank')}
>
<div className='h-full'>{e[2]}</div>
</div>
)
})}
</div>
</div>
</div>
</>
)
}