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
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
|
import Heading from '@components/atoms/headings/heading';
import useStyles from '@utils/hooks/use-styles';
import Link from 'next/link';
import { FC, useRef } from 'react';
import { useIntl } from 'react-intl';
import FlippingLogo, { type FlippingLogoProps } from '../images/flipping-logo';
import styles from './branding.module.scss';
export type BrandingProps = Pick<FlippingLogoProps, 'photo'> & {
/**
* The Branding baseline.
*/
baseline?: string;
/**
* Use H1 if the current page is homepage. Default: false.
*/
isHome?: boolean;
/**
* 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,
...props
}) => {
const baselineRef = useRef<HTMLParagraphElement>(null);
const logoRef = useRef<HTMLDivElement>(null);
const titleRef = useRef<HTMLHeadingElement | HTMLParagraphElement>(null);
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 }
);
useStyles({
property: '--typing-animation',
styles: 'blink 0.7s ease-in-out 0s 2, typing 4.3s linear 0s 1',
target: titleRef,
});
useStyles({
property: '--typing-animation',
styles:
'hide-text 4.25s linear 0s 1, blink 0.8s ease-in-out 4.25s 2, typing 3.8s linear 4.25s 1',
target: baselineRef,
});
useStyles({
property: 'animation',
styles: 'flip-logo 9s ease-in 0s 1',
target: logoRef,
});
return (
<div className={styles.wrapper}>
<FlippingLogo
className={styles.logo}
altText={altText}
logoTitle={logoTitle}
photo={photo}
ref={logoRef}
{...props}
/>
<Heading
isFake={!isHome}
level={1}
withMargin={false}
className={styles.title}
ref={titleRef}
>
{withLink ? (
<Link href="/">
<a className={styles.link}>{title}</a>
</Link>
) : (
title
)}
</Heading>
{baseline && (
<Heading
isFake={true}
level={4}
withMargin={false}
className={styles.baseline}
ref={baselineRef}
>
{baseline}
</Heading>
)}
</div>
);
};
export default Branding;
|
