diff --git a/react/8/pics/src/components/ImageCard.js b/react/8/pics/src/components/ImageCard.js
new file mode 100644
index 0000000..66dbc1a
--- /dev/null
+++ b/react/8/pics/src/components/ImageCard.js
@@ -0,0 +1,34 @@
+import React from 'react'
+
+class ImageCard extends React.Component {
+ constructor(props) {
+ super(props)
+
+ this.state = { spans: 0 }
+
+ this.imageRef = React.createRef()
+ }
+
+ componentDidMount() {
+ this.imageRef.current.addEventListener('load', this.setSpans)
+ }
+
+ setSpans = () => {
+ const height = this.imageRef.current.clientHeight
+
+ const spans = Math.ceil(height / 150 + 1)
+
+ this.setState({ spans })
+ }
+
+ render() {
+ const { description, urls } = this.props.image
+ return (
+
+
+
+ )
+ }
+}
+
+export default ImageCard
\ No newline at end of file
diff --git a/react/8/pics/src/components/ImageList.js b/react/8/pics/src/components/ImageList.js
index b979934..c77959e 100644
--- a/react/8/pics/src/components/ImageList.js
+++ b/react/8/pics/src/components/ImageList.js
@@ -1,11 +1,13 @@
import React from 'react'
+import ImageCard from './ImageCard'
+import './imageList.css'
const ImageList = (props) => {
const images = props.images.map((image) => {
- return
+ return
})
- return {images}
+ return {images}
}
export default ImageList
\ No newline at end of file
diff --git a/react/8/pics/src/components/imageList.css b/react/8/pics/src/components/imageList.css
new file mode 100644
index 0000000..92eb588
--- /dev/null
+++ b/react/8/pics/src/components/imageList.css
@@ -0,0 +1,10 @@
+.image-list {
+ display: grid;
+ grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
+ grid-gap: 0 10px;
+ grid-auto-rows: 100px;
+}
+
+.image-list img {
+ width: 250px;
+}
\ No newline at end of file