24 lines
742 B
TypeScript
24 lines
742 B
TypeScript
|
'use client'
|
||
|
|
import LinkableHeading from "./linkable-heading"
|
||
|
|
import Image from "next/image"
|
||
|
|
import { useState } from "react"
|
||
|
|
import styles from '@/assets/styles/fp.module.css'
|
||
|
|
|
||
|
|
|
||
|
|
export default function Thumbnail({url}: { url: string }) {
|
||
|
|
const [isBig, setIsBig] = useState(false)
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div>
|
||
|
|
<Image
|
||
|
|
className={(isBig) ? styles.zoomout : styles.zoomin}
|
||
|
|
onClick={() => setIsBig(!isBig)}
|
||
|
|
src={url}
|
||
|
|
alt="A composite image showing several frames from the source video"
|
||
|
|
width={(isBig) ? 1920 : 192}
|
||
|
|
height={(isBig) ? 1080 : 108}
|
||
|
|
quality={(isBig) ? 100 : 75}
|
||
|
|
></Image>
|
||
|
|
</div>
|
||
|
|
)
|
||
|
|
}
|