fp/packages/next/app/components/thumbnail.tsx

24 lines
742 B
TypeScript
Raw Normal View History

2024-03-29 07:28:02 +00:00
'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>
)
}