Ligonier Code Challenge.

app/ligonier/photo_card.tsx

@@ -0,0 +1,30 @@
+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);
+	}
+
+	if (data["id"] == 1) {
+		console.log(data);
+	}
+	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>
+	);
+}