108 lines
2.8 KiB
TypeScript
Executable File
108 lines
2.8 KiB
TypeScript
Executable File
import { Text, Container, ActionIcon, Group, rem } from '@mantine/core'
|
|
import {
|
|
IconBrandTwitter,
|
|
IconBrandYoutube,
|
|
IconBrandInstagram,
|
|
} from '@tabler/icons-react'
|
|
import { MantineLogo } from '@mantine/ds'
|
|
import * as classes from './FooterLinks.module.css.ts'
|
|
|
|
const data = [
|
|
{
|
|
title: 'About',
|
|
links: [
|
|
{ label: 'Features', link: '#' },
|
|
{ label: 'Pricing', link: '#' },
|
|
{ label: 'Support', link: '#' },
|
|
{ label: 'Forums', link: '#' },
|
|
],
|
|
},
|
|
{
|
|
title: 'Project',
|
|
links: [
|
|
{ label: 'Contribute', link: '#' },
|
|
{ label: 'Media assets', link: '#' },
|
|
{ label: 'Changelog', link: '#' },
|
|
{ label: 'Releases', link: '#' },
|
|
],
|
|
},
|
|
{
|
|
title: 'Community',
|
|
links: [
|
|
{ label: 'Join Discord', link: '#' },
|
|
{ label: 'Follow on Twitter', link: '#' },
|
|
{ label: 'Email newsletter', link: '#' },
|
|
{ label: 'GitHub discussions', link: '#' },
|
|
],
|
|
},
|
|
]
|
|
const Footer = () => {
|
|
const groups = data.map((group) => {
|
|
const links = group.links.map((link, index) => (
|
|
<Text<'a'>
|
|
key={index}
|
|
className={classes.link}
|
|
component="a"
|
|
href={link.link}
|
|
onClick={(event) => event.preventDefault()}
|
|
>
|
|
{link.label}
|
|
</Text>
|
|
))
|
|
|
|
return (
|
|
<div className={classes.wrapper} key={group.title}>
|
|
<Text className={classes.title}>{group.title}</Text>
|
|
{links}
|
|
</div>
|
|
)
|
|
})
|
|
|
|
return (
|
|
<footer className={classes.footer}>
|
|
<Container className={classes.inner}>
|
|
<div className={classes.logo}>
|
|
<MantineLogo size={30} />
|
|
<Text size="xs" c="dimmed" className={classes.description}>
|
|
Build fully functional accessible web applications faster than ever
|
|
</Text>
|
|
</div>
|
|
<div className={classes.groups}>{groups}</div>
|
|
</Container>
|
|
<Container className={classes.afterFooter}>
|
|
<Text c="dimmed" size="sm">
|
|
© 2023 APACTECH.dev. All rights reserved.
|
|
</Text>
|
|
|
|
<Group
|
|
gap={0}
|
|
className={classes.social}
|
|
justify="flex-end"
|
|
wrap="nowrap"
|
|
>
|
|
<ActionIcon size="lg" color="gray" variant="subtle">
|
|
<IconBrandTwitter
|
|
style={{ width: rem(18), height: rem(18) }}
|
|
stroke={1.5}
|
|
/>
|
|
</ActionIcon>
|
|
<ActionIcon size="lg" color="gray" variant="subtle">
|
|
<IconBrandYoutube
|
|
style={{ width: rem(18), height: rem(18) }}
|
|
stroke={1.5}
|
|
/>
|
|
</ActionIcon>
|
|
<ActionIcon size="lg" color="gray" variant="subtle">
|
|
<IconBrandInstagram
|
|
style={{ width: rem(18), height: rem(18) }}
|
|
stroke={1.5}
|
|
/>
|
|
</ActionIcon>
|
|
</Group>
|
|
</Container>
|
|
</footer>
|
|
)
|
|
}
|
|
|
|
export default Footer
|