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
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
|
import Heading from '@components/atoms/headings/heading';
import Link from 'next/link';
import { FC } from 'react';
import { useIntl } from 'react-intl';
import styles from './branding.module.scss';
import FlippingLogo from './flipping-logo';
type BrandingProps = {
/**
* The Branding baseline.
*/
baseline?: string;
/**
* Use H1 if the current page is homepage. Default: false.
*/
isHome?: boolean;
/**
* A photography URL.
*/
photo: string;
/**
* The Branding title;
*/
title: string;
/**
* Wraps the title with a link to homepage. Default: false.
*/
withLink?: boolean;
};
/**
* Branding component
*
* Render the branding logo, title and optional baseline.
*/
const Branding: FC<BrandingProps> = ({
baseline,
isHome = false,
photo,
title,
withLink = false,
}) => {
const intl = useIntl();
const altText = intl.formatMessage(
{
defaultMessage: '{website} picture',
description: 'Branding: photo alternative text',
id: 'dDK5oc',
},
{ website: title }
);
const logoTitle = intl.formatMessage(
{
defaultMessage: '{website} logo',
description: 'Branding: logo title',
id: 'x55qsD',
},
{ website: title }
);
return (
<div className={styles.wrapper}>
<FlippingLogo
additionalClasses={styles.logo}
altText={altText}
logoTitle={logoTitle}
photo={photo}
/>
<Heading
isFake={!isHome}
level={1}
withMargin={false}
additionalClasses={styles.title}
>
{withLink ? (
<Link href="/">
<a className={styles.link}>{title}</a>
</Link>
) : (
title
)}
</Heading>
{baseline && (
<Heading
isFake={true}
level={4}
withMargin={false}
additionalClasses={styles.baseline}
>
{baseline}
</Heading>
)}
</div>
);
};
export default Branding;
|
