27 lines
859 B
TypeScript
27 lines
859 B
TypeScript
import { useState } from 'react';
|
|
|
|
// A Card, rendering an image and toggling photographer information when clicked
|
|
export function PhotoCard({ data }) {
|
|
const [infoToggled, setInfoToggled] = useState(false);
|
|
|
|
function handleClick() {
|
|
setInfoToggled(!infoToggled);
|
|
}
|
|
|
|
return (
|
|
<div>
|
|
<div className="relative flex justify-center">
|
|
<div onClick={handleClick} className="overflow-hidden rounded-2xl">
|
|
<img className={`transition-blur duration-500 ease-in-out ${infoToggled ? 'blur-sm' : 'blur-none'}`}
|
|
src={data["download_url"]}
|
|
/>
|
|
</div>
|
|
<p className={`font-libre absolute self-center text-center bg-mist-500/70 p-2 rounded-lg text-white transition-opacity duration-500 ease-in-out ${infoToggled ? 'opacity-100' : 'opacity-0'}`}
|
|
onClick={handleClick}
|
|
>
|
|
Photographer: {data['author']}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|