Typescript support

app/ligonier/photo_gallery.tsx

@@ -3,10 +3,17 @@ import { useState } from 'react';
 import { Header } from './header';
 import { Footer } from './footer';
 import { PhotoCard } from './photo_card';
+import type { PicsumData } from '../api/picsum';
+
+interface PhotosProps {
+    imageData: PicsumData[];
+    isGallery: boolean;
+}
 
 export function PhotoGallery() {
-	const imageData = useLoaderData();
+	const imageData: PicsumData[] = useLoaderData();
 	const [isGallery, setGallery] = useState(false);
+    const [favorites, setFavorites] = useState();
 	return (
 		<div>
 			<Header isGallery={isGallery} handleClick={()=> setGallery(!isGallery)} />
@@ -19,7 +26,15 @@ export function PhotoGallery() {
 	);
 }
 
-function Photos({ imageData, isGallery}) {
+function favorites() {
+    return (
+        <button onClick={() => {}
+        }>
+        </button>
+    );
+}
+
+function Photos({ imageData, isGallery }: PhotosProps) {
 	const listClassNames = "flex flex-wrap"
 	const galleryClassNames = "grid md:grid-cols-2 xl:grid-cols-3"
 	const photoCards = imageData.map(image =>