-
Notifications
You must be signed in to change notification settings - Fork 0
/
PhotoDetail.tsx
61 lines (56 loc) · 1.82 KB
/
PhotoDetail.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
import Image from 'next/image'
import { PhotoDetail as PhotoDetailType } from '~/features/album/types/PhotoDetail'
import styles from './PhotoDetail.module.css'
import { useCallback, useEffect, useState } from 'react'
import { useCurrentViewTransition } from '~/features/shared/hooks/useCurrentViewTransition'
import clsx from 'clsx'
type Props = {
slug: string
data: PhotoDetailType
}
export const PhotoDetail = ({ data, slug }: Props) => {
const [loaded, setLoaded] = useState(false)
const onLoadingComplete = useCallback(() => {
setLoaded(true)
}, [])
const [viewTransitionFinished, setViewTransitionFinished] = useState(false)
const viewTransition = useCurrentViewTransition()
useEffect(() => {
if (!viewTransition) {
setViewTransitionFinished(true)
return
}
viewTransition.finished.then(() => {
setViewTransitionFinished(true)
})
}, [viewTransition])
const shouldShowOverlay = !loaded || !viewTransitionFinished
return (
<div
className={styles.root}
style={{
'--overlay-transition-name': `albums-${slug}-${data.id}`,
'--overlay-background': data.color,
}}
>
<div className={styles.imageContainer}>
<Image
src={data.url}
alt={data.title}
width={2048}
height={2048}
priority
className={clsx(styles.image, shouldShowOverlay ? styles.hidden : styles.transitionTarget)}
onLoadingComplete={onLoadingComplete}
/>
<div className={styles.overlayContainer}>
<div className={clsx(styles.overlay, shouldShowOverlay ? styles.transitionTarget : styles.hidden)} />
</div>
</div>
<div className={styles.info}>
<h2>{data.title}</h2>
<p className={styles.description}>{data.description}</p>
</div>
</div>
)
}