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
|
import { type FC, useRef, type ReactNode } from 'react';
import { useStyles } from '../../../utils/hooks';
import { Heading, Link } from '../../atoms';
import { FlippingLogo } from '../images';
import styles from './branding.module.scss';
export type BrandingProps = {
/**
* The Branding baseline.
*/
baseline?: string;
/**
* Use H1 if the current page is homepage. Default: false.
*/
isHome?: boolean;
/**
* The website logo.
*/
logo: ReactNode;
/**
* Your photo.
*/
photo: ReactNode;
/**
* 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.
*/
export const Branding: FC<BrandingProps> = ({
baseline,
isHome = false,
logo,
photo,
title,
withLink = false,
}) => {
const baselineRef = useRef<HTMLParagraphElement>(null);
const titleRef = useRef<HTMLHeadingElement | HTMLParagraphElement>(null);
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,
});
return (
<div className={styles.wrapper}>
<FlippingLogo back={logo} className={styles.logo} front={photo} />
<Heading
className={styles.title}
isFake={!isHome}
level={1}
ref={titleRef}
>
{withLink ? (
<Link className={styles.link} href="/">
{title}
</Link>
) : (
title
)}
</Heading>
{baseline ? (
<Heading className={styles.baseline} isFake level={4} ref={baselineRef}>
{baseline}
</Heading>
) : null}
</div>
);
};
|
