2022-08-28 20:12:09 +02:00
|
|
|
import { PeaceHand } from 'iconoir-react';
|
|
|
|
import styled from 'styled-components';
|
2023-09-25 00:31:45 +02:00
|
|
|
import {
|
|
|
|
GITHUB_LINK,
|
|
|
|
ISSUE_LINK,
|
|
|
|
LICENSE_LINK,
|
|
|
|
PRIVACY_LINK,
|
|
|
|
SUPPORT_LINK,
|
|
|
|
} from '../lib/constants';
|
2022-08-28 20:12:09 +02:00
|
|
|
import { Logo, LogoContainer, LogoIcon } from './Header';
|
2023-01-30 22:38:12 +01:00
|
|
|
import { Text13, Text17 } from './Typography';
|
2022-08-28 20:12:09 +02:00
|
|
|
|
2023-01-30 22:38:12 +01:00
|
|
|
export interface FooterCategoryProps {
|
|
|
|
category: string;
|
2023-09-25 00:31:45 +02:00
|
|
|
links: { name: string; url: string }[];
|
2023-01-30 22:38:12 +01:00
|
|
|
}
|
2023-10-29 00:33:17 +02:00
|
|
|
|
2024-02-20 14:03:37 +01:00
|
|
|
const year = new Date().getFullYear();
|
|
|
|
|
2023-01-30 22:38:12 +01:00
|
|
|
function FooterCategory({ category, links }: FooterCategoryProps) {
|
|
|
|
return (
|
|
|
|
<FooterCategoryContainer>
|
|
|
|
<FooterCategoryTitle>{category}</FooterCategoryTitle>
|
|
|
|
<FooterCategoryLinks>
|
|
|
|
{links.map((link) => (
|
2023-09-25 00:31:45 +02:00
|
|
|
<FooterCategoryLink key={link.url} href={link.url}>
|
|
|
|
{link.name}
|
|
|
|
</FooterCategoryLink>
|
2023-01-30 22:38:12 +01:00
|
|
|
))}
|
|
|
|
</FooterCategoryLinks>
|
|
|
|
</FooterCategoryContainer>
|
|
|
|
);
|
|
|
|
}
|
2023-10-29 00:33:17 +02:00
|
|
|
|
2022-08-28 20:12:09 +02:00
|
|
|
export function Footer() {
|
|
|
|
return (
|
|
|
|
<Container>
|
|
|
|
<LogoContainer>
|
|
|
|
<LogoIcon>
|
|
|
|
<PeaceHand />
|
|
|
|
</LogoIcon>
|
|
|
|
<Logo src={'/iconoir-logo.svg'} alt={'Iconoir Logo'} />
|
|
|
|
</LogoContainer>
|
2023-01-30 22:38:12 +01:00
|
|
|
<FooterCategories>
|
2023-09-25 00:31:45 +02:00
|
|
|
<FooterCategory
|
|
|
|
category={'Project'}
|
|
|
|
links={[
|
|
|
|
{ name: 'Our Mission', url: '/support' },
|
|
|
|
{ name: 'Contribute', url: '/docs/contributing' },
|
|
|
|
{
|
|
|
|
name: 'Donate',
|
|
|
|
url: SUPPORT_LINK,
|
|
|
|
},
|
|
|
|
]}
|
|
|
|
/>
|
|
|
|
<FooterCategory
|
|
|
|
category={'Support'}
|
|
|
|
links={[
|
|
|
|
{
|
|
|
|
name: 'License',
|
|
|
|
url: LICENSE_LINK,
|
|
|
|
},
|
|
|
|
{
|
|
|
|
name: 'GitHub Repository',
|
|
|
|
url: GITHUB_LINK,
|
|
|
|
},
|
|
|
|
{
|
|
|
|
name: 'File a Request',
|
|
|
|
url: ISSUE_LINK,
|
|
|
|
},
|
|
|
|
]}
|
|
|
|
/>
|
|
|
|
<FooterCategory
|
|
|
|
category={'Developers'}
|
|
|
|
links={[
|
|
|
|
{ name: 'Changelog', url: '/docs/changelog' },
|
|
|
|
{
|
|
|
|
name: 'React and React Native',
|
|
|
|
url: '/docs/packages/iconoir-react',
|
|
|
|
},
|
|
|
|
{ name: 'Flutter', url: '/docs/packages/iconoir-flutter' },
|
|
|
|
{ name: 'Framer and Figma', url: '/docs/packages/framer' },
|
|
|
|
{ name: 'CSS', url: '/docs/packages/css' },
|
|
|
|
]}
|
|
|
|
/>
|
2023-01-30 22:38:12 +01:00
|
|
|
</FooterCategories>
|
|
|
|
<FooterEnd>
|
2023-09-25 00:31:45 +02:00
|
|
|
<Text13 style={{ fontWeight: 400 }}>
|
2024-02-20 14:03:37 +01:00
|
|
|
Parts of this content are ©2020-{year} by individual Iconoir
|
2023-09-25 00:31:45 +02:00
|
|
|
contributors. Content available under a{' '}
|
2024-02-10 12:48:52 +01:00
|
|
|
<a href={LICENSE_LINK} target={'_blank'} rel={'nofollow noreferrer'}>
|
2023-09-25 00:31:45 +02:00
|
|
|
MIT License
|
|
|
|
</a>
|
|
|
|
.
|
|
|
|
</Text13>
|
|
|
|
<Text13 style={{ fontWeight: 400 }}>
|
2024-02-10 12:48:52 +01:00
|
|
|
<a href={PRIVACY_LINK} target={'_blank'} rel={'nofollow noreferrer'}>
|
2023-09-25 00:31:45 +02:00
|
|
|
Privacy
|
|
|
|
</a>
|
|
|
|
</Text13>
|
2023-01-30 22:38:12 +01:00
|
|
|
</FooterEnd>
|
2022-08-28 20:12:09 +02:00
|
|
|
</Container>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
|
|
|
const Container = styled.div`
|
2023-01-30 22:38:12 +01:00
|
|
|
display: block;
|
|
|
|
margin-top: 110px;
|
2022-08-28 20:12:09 +02:00
|
|
|
padding-top: 30px;
|
2023-09-26 00:21:30 +02:00
|
|
|
margin-top: 100px;
|
2023-01-30 22:38:12 +01:00
|
|
|
padding: 84px 12%;
|
2023-03-19 21:23:43 +01:00
|
|
|
background-color: var(--g7);
|
2022-08-28 20:12:09 +02:00
|
|
|
align-items: center;
|
|
|
|
> :not(:last-child) {
|
|
|
|
margin-right: 50px;
|
|
|
|
}
|
|
|
|
`;
|
2023-01-30 22:38:12 +01:00
|
|
|
const FooterEnd = styled.div`
|
2023-03-19 21:23:43 +01:00
|
|
|
border-top: 1px solid var(--g5);
|
2023-01-30 22:38:12 +01:00
|
|
|
padding-top: 20px;
|
|
|
|
margin-top: 74px;
|
|
|
|
width: 100%;
|
|
|
|
display: flex;
|
|
|
|
justify-content: space-between;
|
|
|
|
`;
|
|
|
|
const FooterCategories = styled.div`
|
|
|
|
width: 100%;
|
|
|
|
margin-top: 54px;
|
|
|
|
display: flex;
|
|
|
|
`;
|
|
|
|
const FooterCategoryContainer = styled.div`
|
|
|
|
width: 28%;
|
|
|
|
margin-right: 20px;
|
|
|
|
`;
|
|
|
|
const FooterCategoryTitle = styled(Text17)`
|
2023-09-25 04:43:10 +02:00
|
|
|
&&& {
|
|
|
|
margin-bottom: 24px;
|
|
|
|
font-weight: 600;
|
|
|
|
display: block;
|
|
|
|
color: var(--g0);
|
|
|
|
}
|
2023-01-30 22:38:12 +01:00
|
|
|
`;
|
2023-09-25 00:31:45 +02:00
|
|
|
const FooterCategoryLinks = styled.div``;
|
2023-01-30 22:38:12 +01:00
|
|
|
const FooterCategoryLink = styled.a`
|
|
|
|
display: block;
|
|
|
|
font-size: 17px;
|
2023-03-19 21:23:43 +01:00
|
|
|
color: var(--g1);
|
2023-01-30 22:38:12 +01:00
|
|
|
width: fit-content;
|
|
|
|
margin-bottom: 12px;
|
|
|
|
text-decoration: none;
|
2023-09-25 00:31:45 +02:00
|
|
|
&:hover {
|
2023-01-30 22:38:12 +01:00
|
|
|
text-decoration: underline;
|
2023-03-19 21:23:43 +01:00
|
|
|
color: var(--g0);
|
2023-01-30 22:38:12 +01:00
|
|
|
}
|
2022-08-28 20:12:09 +02:00
|
|
|
`;
|