|
1 | 1 | import { useState } from 'react';
|
2 | 2 | import classnames from 'classnames';
|
3 | 3 |
|
| 4 | +import Img from 'react-optimized-image'; |
| 5 | + |
4 | 6 | import styles from '../styles/components/logo.module.scss';
|
5 | 7 |
|
6 |
| -import hackerWebpSrc from '../assets/logo/avatar-hacker.jpg?webp'; |
7 |
| -import hackerJpgSrc from '../assets/logo/avatar-hacker.jpg'; |
8 |
| -import avatarWebpSrc from '../assets/logo/avatar.jpg?webp'; |
9 |
| -import avatarJpgSrc from '../assets/logo/avatar.jpg'; |
10 |
| -import speakerWebpSrc from '../assets/logo/speaker.jpg?webp'; |
11 |
| -import speakerJpgSrc from '../assets/logo/speaker.jpg'; |
| 8 | +import avatarSrc from '../assets/logo/avatar.jpg'; |
| 9 | +import hackerSrc from '../assets/logo/avatar-hacker.jpg'; |
| 10 | +import speakerSrc from '../assets/logo/speaker.jpg'; |
12 | 11 |
|
13 |
| -const srcSets = { |
14 |
| - normal: { |
15 |
| - webp: hackerWebpSrc, |
16 |
| - jpg: hackerJpgSrc, |
17 |
| - }, |
18 |
| - hover: { |
19 |
| - webp: avatarWebpSrc, |
20 |
| - jpg: avatarJpgSrc, |
21 |
| - }, |
22 |
| - revealed: { |
23 |
| - webp: speakerWebpSrc, |
24 |
| - jpg: speakerJpgSrc, |
25 |
| - }, |
26 |
| -}; |
| 12 | +const NormalLogoImg = props => ( |
| 13 | + <Img |
| 14 | + src={avatarSrc} webp |
| 15 | + className={classnames(styles.normal, 'rounded-full')} |
| 16 | + {...props} |
| 17 | + /> |
| 18 | +); |
| 19 | +const HackerLogoImg = props => ( |
| 20 | + <Img |
| 21 | + src={hackerSrc} webp |
| 22 | + className={classnames(styles.hacker, 'rounded-full')} |
| 23 | + {...props} |
| 24 | + /> |
| 25 | +); |
| 26 | +const SpeakerLogoImg = props => ( |
| 27 | + <Img |
| 28 | + src={speakerSrc} webp |
| 29 | + className={classnames(styles.speaker, 'rounded-full')} |
| 30 | + {...props} |
| 31 | + /> |
| 32 | +); |
27 | 33 |
|
28 |
| -const Logo = ({ className, forcerRvealed }) => { |
| 34 | +const Logo = ({ className, width, forcedRvealed }) => { |
29 | 35 | const [revealed, setRevealed] = useState(false);
|
30 |
| - const [hover, setHover] = useState(false); |
31 |
| - |
32 |
| - const srcSetKey = (forcerRvealed || revealed) ? 'revealed' : (hover ? 'hover' : 'normal'); |
| 36 | + const widthProps = { width, height: width }; |
33 | 37 |
|
34 | 38 | return (
|
35 | 39 | <div
|
36 |
| - className={classnames(styles.logo, className)} |
| 40 | + className={ |
| 41 | + classnames( |
| 42 | + styles.logo, className, |
| 43 | + { [styles.revealed]: revealed || forcedRvealed }, |
| 44 | + ) |
| 45 | + } |
37 | 46 | onClick={() => setRevealed(r => !r)}
|
38 |
| - onMouseEnter={() => setHover(true)} |
39 |
| - onMouseLeave={() => setHover(false)} |
40 | 47 | >
|
41 |
| - <picture> |
42 |
| - <source srcSet={srcSets[srcSetKey].webp} type='image/webp' /> |
43 |
| - <source srcSet={srcSets[srcSetKey].jpg} type='image/jpeg' /> |
44 |
| - <img |
45 |
| - alt='logo' |
46 |
| - src={srcSets[srcSetKey].jpg} |
47 |
| - className={classnames(styles.img, 'max-w-full max-h-full rounded-full border')} |
48 |
| - /> |
49 |
| - </picture> |
| 48 | + <NormalLogoImg alt='logo' {...widthProps} /> |
| 49 | + <HackerLogoImg {...widthProps} /> |
| 50 | + <SpeakerLogoImg {...widthProps} /> |
50 | 51 | </div>
|
51 | 52 | );
|
52 | 53 | };
|
|
0 commit comments