Ligonier Code Challenge.

app/ligonier/photo_gallery.tsx

@@ -0,0 +1,36 @@
+import { useLoaderData } from 'react-router';
+import { useState } from 'react';
+import { Header } from './header';
+import { Footer } from './footer';
+import { ControlBar } from './control_bar';
+import { PhotoCard } from './photo_card';
+
+export function PhotoGallery({ numColumns }) {
+	const imageData = useLoaderData();
+	const [isGallery, setGallery] = useState(false);
+	return (
+		<div>
+			<Header isGallery={isGallery} handleClick={()=> setGallery(!isGallery)} />
+			<Photos 
+				imageData={imageData}
+				isGallery={isGallery}
+			/>
+			<Footer />
+		</div>
+	);
+}
+
+function Photos({ imageData, isGallery}) {
+	const listClassNames = "flex flex-wrap"
+	const galleryClassNames = "grid md:grid-cols-2 xl:grid-cols-3"
+	const photoCards = imageData.map(image =>
+		<PhotoCard
+			key={image.id}
+			data={image}
+		/>);
+	return (
+		<div className={`${isGallery ? galleryClassNames : listClassNames} md:m-20 md:mt-10 m-10 gap-10 mt-10 xl:ml-50 xl:mr-50`}>
+			{photoCards}
+		</div>
+	);
+}