This repository has been archived by the owner on Sep 19, 2023. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Footer.tsx
71 lines (67 loc) · 2.25 KB
/
Footer.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
import { Link, graphql, useStaticQuery } from 'gatsby';
import React, { forwardRef } from 'react';
import FacebookIcon from '../../../assets/facebook.svg';
import InstagramIcon from '../../../assets/instagram.svg';
import LinkedInIcon from '../../../assets/linked-in.svg';
import {
CONTACT_EMAIL_ADDRESS,
CONTACT_PHONE_NUMBER,
} from '../../../const/contact';
import { COOKIE_POLICY_PAGE, PRIVACY_POLICY_PAGE } from '../../../const/routes';
import { SITE_TITLE } from '../../../const/site-metadata';
import Heading from '../../text/heading/Heading';
import EmailLink from '../link/EmailLink';
import PhoneLink from '../link/PhoneLink';
import Section from '../section/Section';
import {
footerLink,
primaryRow,
secondaryRow,
socials,
} from './Common.module.css';
import FooterIconLink from './FooterIconLink';
export default forwardRef<HTMLElement>((_, ref) => {
const data = useStaticQuery<Queries.FooterQuery>(graphql`
query Footer {
site {
buildTime(formatString: "YYYY")
}
}
`);
return (
<footer ref={ref}>
<Section variant="dark" className={primaryRow}>
<div>
<Heading variant="yellow">Zavolajte</Heading>
<PhoneLink className={footerLink} number={CONTACT_PHONE_NUMBER} />
</div>
<div>
<Heading variant="yellow">Napíšte</Heading>
<EmailLink address={CONTACT_EMAIL_ADDRESS} className={footerLink} />
</div>
</Section>
<Section variant="dark" className={secondaryRow}>
<div>
{SITE_TITLE} {data.site?.buildTime}
</div>
<Link className={footerLink} to={PRIVACY_POLICY_PAGE}>
Ochrana súkromia
</Link>
<Link className={footerLink} to={COOKIE_POLICY_PAGE}>
Súbory cookies
</Link>
<div className={socials}>
<FooterIconLink href="https://www.facebook.com/markavenueagency">
<FacebookIcon />
</FooterIconLink>
<FooterIconLink href="https://www.instagram.com/markavenueagency/">
<InstagramIcon />
</FooterIconLink>
<FooterIconLink href="https://www.linkedin.com/company/mark-avenue/">
<LinkedInIcon />
</FooterIconLink>
</div>
</Section>
</footer>
);
});