fix #5 create a Random Location, Topic static content

src/components/RandomLocation.js

@@ -1,9 +1,26 @@
 import React from 'react';
-class RandomLocation extends React.Component{
-render(){
-  return(
-   'hello Random Location!'
+import VideoItem from "./VideoItem";
+import Grid from 'react-css-grid'
+
+class RandomLocation extends React.Component {
+  render() {
+    const Location =()=>{
+    return 'Location Name';
+    }
+    return (
+      <section>
+        <Location/>
+        <Grid
+          width={320}
+          gap={24}>
+          <VideoItem/>
+          <VideoItem/>
+          <VideoItem/>
+          <VideoItem/>
+        </Grid>
+      </section>
     )
+  }
 }
-}
+
 export default (RandomLocation);

src/components/RandomTopic.js

@@ -1,9 +1,21 @@
+import Grid from 'react-css-grid'
 import React from 'react';
-class RandomTopic extends React.Component{
-render(){
-  return(
-   'hello Random Topic!'
+import VideoItem from "./VideoItem";
+
+class RandomTopic extends React.Component {
+  render() {
+    return (
+      <Grid
+        width={320}
+        gap={24}>
+        <VideoItem/>
+        <VideoItem/>
+        <VideoItem/>
+        <VideoItem/>
+      </Grid>
+
     )
+  }
 }
-}
+
 export default (RandomTopic);

src/components/VideoItem.js

@@ -0,0 +1,12 @@
+import React from 'react';
+class VideoItem extends React.Component{
+render(){
+  return(
+    <section className="video-item">
+      <img className="video-thumbnail" src={require('../assets/images/img1.png')} alt=""/>
+      <h3 className="video-title">Titleeeee #1</h3>
+    </section>
+  )
+}
+}
+export default  (VideoItem);

src/stylesheets/style.css

@@ -61,5 +61,24 @@ header {
     top: 0;
     padding: 2em;
 }
-/* search */
 
+/* search */
+.search-button {
+    background: white;
+}
+
+.search-button img {
+    max-width: 50px;
+}
+
+.search-box {
+    padding: 1em;
+    background: var(--858-light-gray-color);
+}
+
+.search-box::placeholder {
+    color: black;
+}
+.video-thumbnail{
+    max-width: 300px;
+}