rsnext/examples/with-unsplash/components/Gallery/index.tsx
Diego Gennaro 85d58298a3
Add example: Unsplash integration (#16142)
* nextjs with unsplash initial commit

* update demo link

* remove isomorphic-unfetch

* remove ssr on collection page

* fix style issues

* fix import/no-anonymous-default-export

* usign fetch instead of request

* remove credits

* improve instructions

* improve instructions

* Updated readme steps and images

* Updated readme

* Updated gitignore

Co-authored-by: Luis Alvarez <luis@vercel.com>
2020-08-22 16:02:49 -05:00

34 lines
820 B
TypeScript

import useSWR from 'swr'
import fetcher from 'libs/fetcher'
import styles from './Gallery.module.css'
import UImage from 'components/UImage'
interface GalleryProps {
id_collection?: number
}
const Gallery = ({ id_collection }: GalleryProps) => {
const { data, error } = useSWR(
'/api/photo' + (id_collection ? `/${id_collection}` : ''),
fetcher
)
if (error) return <div>failed to load</div>
if (!data) return <div>loading...</div>
return (
<section className={styles.gallery_container}>
{data.map(({ id, urls, alt_description, description }) => (
<UImage
id={id}
urls={urls}
altDescription={alt_description ? alt_description : description}
key={`${id}_uimage_component`}
/>
))}
</section>
)
}
export default Gallery