50 lines
1.2 KiB
TypeScript
50 lines
1.2 KiB
TypeScript
import { useLoaderData } from 'react-router';
|
|
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: PicsumData[] = useLoaderData();
|
|
const [isGallery, setGallery] = useState(false);
|
|
const [favorites, setFavorites] = useState();
|
|
return (
|
|
<div>
|
|
<Header isGallery={isGallery} handleClick={()=> setGallery(!isGallery)} />
|
|
<Photos
|
|
imageData={imageData}
|
|
isGallery={isGallery}
|
|
/>
|
|
<Footer />
|
|
</div>
|
|
);
|
|
}
|
|
|
|
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 =>
|
|
<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>
|
|
);
|
|
}
|