From 3a42fee6e28dc10e2af33a2e7c505badb65a9aa8 Mon Sep 17 00:00:00 2001
From: Ahmed-Ayman <ahmedayman055g@gmail.com>
Date: Thu, 6 Dec 2018 20:33:29 +0200
Subject: [PATCH] create static homepage, create VideoPlayer and Title
 Components

---
 src/App.js                       |  2 ++
 src/components/RandomDate.js     | 30 ++++++++++++++++-----
 src/components/RandomLocation.js | 10 +++----
 src/components/RandomTopic.js    | 23 ++++++++++------
 src/components/SectionHeading.js | 15 +++++++++++
 src/components/VideoItem.js      |  6 +++--
 src/components/VideoPlayer.js    | 15 +++++++++++
 src/containers/Home.js           |  1 -
 src/containers/TopicsList.js     | 19 +++++++++++---
 src/stylesheets/style.css        | 45 ++++++++++++++++++++++++++++++--
 10 files changed, 136 insertions(+), 30 deletions(-)
 create mode 100644 src/components/SectionHeading.js
 create mode 100644 src/components/VideoPlayer.js

diff --git a/src/App.js b/src/App.js
index d3fede9..acdca73 100644
--- a/src/App.js
+++ b/src/App.js
@@ -7,6 +7,7 @@ import TopicsList from './containers/TopicsList';
 import store from './store/configureStore';
 import Header from "./components/Header";
 import Footer from "./components/Footer";
+import Search from "./components/Search";
 
 class App extends Component {
   render() {
@@ -15,6 +16,7 @@ class App extends Component {
 
         <div className="App">
           <Header/>
+          <Search/>
           <Route exact={true} path="/" component={Home}/>
           <Route path="/topics" component={TopicsList}/>
           <Footer/>
diff --git a/src/components/RandomDate.js b/src/components/RandomDate.js
index 762fa04..e458ce8 100644
--- a/src/components/RandomDate.js
+++ b/src/components/RandomDate.js
@@ -1,9 +1,25 @@
 import React from 'react';
-class RandomDate extends React.Component{
-render(){
-  return(
-   'hello Dandom Date!'
-  )
+import Grid from 'react-css-grid';
+import VideoItem from "./VideoItem";
+import SectionHeading from "./SectionHeading";
+
+class RandomDate extends React.Component {
+  render() {
+
+    return (
+      <section>
+        <SectionHeading title="Random Date"/>
+        <Grid
+          width={450}
+          gap={24}>
+          <VideoItem/>
+          <VideoItem/>
+          <VideoItem/>
+          <VideoItem/>
+        </Grid>
+      </section>
+    )
+  }
 }
-}
-export default  (RandomDate);
\ No newline at end of file
+
+export default (RandomDate);
\ No newline at end of file
diff --git a/src/components/RandomLocation.js b/src/components/RandomLocation.js
index 9c23200..0c9ab4a 100644
--- a/src/components/RandomLocation.js
+++ b/src/components/RandomLocation.js
@@ -1,22 +1,20 @@
 import React from 'react';
 import VideoItem from "./VideoItem";
 import Grid from 'react-css-grid'
+import SectionHeading from "./SectionHeading";
 
 class RandomLocation extends React.Component {
   render() {
-    const Location =()=>{
-    return 'Location Name';
-    }
+
     return (
       <section>
-        <Location/>
+        <SectionHeading title="Random Location"/>
         <Grid
-          width={320}
+          width={225}
           gap={24}>
           <VideoItem/>
           <VideoItem/>
           <VideoItem/>
-          <VideoItem/>
         </Grid>
       </section>
     )
diff --git a/src/components/RandomTopic.js b/src/components/RandomTopic.js
index 882b63b..2d99ed3 100644
--- a/src/components/RandomTopic.js
+++ b/src/components/RandomTopic.js
@@ -1,18 +1,25 @@
 import Grid from 'react-css-grid'
 import React from 'react';
 import VideoItem from "./VideoItem";
+import SectionHeading from "./SectionHeading";
 
 class RandomTopic extends React.Component {
+
   render() {
     return (
-      <Grid
-        width={320}
-        gap={24}>
-        <VideoItem/>
-        <VideoItem/>
-        <VideoItem/>
-        <VideoItem/>
-      </Grid>
+      <section>
+        <SectionHeading title="Topic Name"/>
+        <Grid
+          width={450}
+          gap={16}>
+          <VideoItem/>
+          <VideoItem/>
+          <VideoItem/>
+          <VideoItem/>
+        </Grid>
+        <a href="/topics">See All videos</a>
+
+      </section>
 
     )
   }
diff --git a/src/components/SectionHeading.js b/src/components/SectionHeading.js
new file mode 100644
index 0000000..aedf4e7
--- /dev/null
+++ b/src/components/SectionHeading.js
@@ -0,0 +1,15 @@
+import React from 'react';
+
+/**
+ * a section heading is any heading that needs the style of having a horizontal line underneath it.
+ * it could be the Topics Heading/Title, Date..etc.
+ */
+class SectionHeading extends React.Component {
+  render() {
+    return (
+      <h2 className="section-title">{this.props.title}</h2>
+    )
+  }
+}
+
+export default (SectionHeading);
\ No newline at end of file
diff --git a/src/components/VideoItem.js b/src/components/VideoItem.js
index b48fb58..9adec35 100644
--- a/src/components/VideoItem.js
+++ b/src/components/VideoItem.js
@@ -1,12 +1,14 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import {getThumbnail} from '../utils/video';
+
 class VideoItem extends React.Component {
 
   render() {
     return (
       <section className="video-item">
-        <img className="video-thumbnail" src={require('../assets/images/img2.png')} alt=""/>
+        <section className="video-thumbnail-container">
+          <img className="video-thumbnail" src={require('../assets/images/img2.png')} alt=""/>
+        </section>
         <h3 className="video-title">Random Title</h3>
       </section>
     )
diff --git a/src/components/VideoPlayer.js b/src/components/VideoPlayer.js
new file mode 100644
index 0000000..2310156
--- /dev/null
+++ b/src/components/VideoPlayer.js
@@ -0,0 +1,15 @@
+import React from 'react';
+
+class VideoPlayer extends React.Component {
+  render() {
+
+    return (
+      <section>
+        <video>
+        </video>
+      </section>
+    )
+  }
+}
+
+export default (VideoPlayer);
\ No newline at end of file
diff --git a/src/containers/Home.js b/src/containers/Home.js
index 5d8b91c..3986085 100644
--- a/src/containers/Home.js
+++ b/src/containers/Home.js
@@ -16,7 +16,6 @@ class Home extends React.Component {
   render() {
     return (
       <div>
-        <Search/>
         <RandomTopic/>
         <RandomLocation/>
         <RandomDate/>
diff --git a/src/containers/TopicsList.js b/src/containers/TopicsList.js
index b654cae..c3052c8 100644
--- a/src/containers/TopicsList.js
+++ b/src/containers/TopicsList.js
@@ -1,11 +1,22 @@
-import React, { Component } from 'react';
+import React from 'react';
+import VideoItem from "../components/VideoItem";
+import Grid from "react-css-grid";
+import SectionHeading from "../components/SectionHeading";
 
 class TopicsList extends React.Component {
   render() {
     return (
-      <div>
-        This is topics list.
-      </div>
+      <section>
+        <SectionHeading title="Random Topic"/>
+        <Grid
+          width={450}
+          gap={24}>
+          <VideoItem/>
+          <VideoItem/>
+          <VideoItem/>
+          <VideoItem/>
+        </Grid>
+      </section>
     );
   }
 }
diff --git a/src/stylesheets/style.css b/src/stylesheets/style.css
index c6f12b2..87ee0a8 100644
--- a/src/stylesheets/style.css
+++ b/src/stylesheets/style.css
@@ -45,6 +45,12 @@
     --858-light-gray-color: #ebebeb;
 }
 
+/* App */
+.App {
+    max-width: 960px;
+    margin: 0 auto;
+}
+
 /* header */
 header {
     padding-top: 1em;
@@ -65,6 +71,8 @@ header {
 /* search */
 .search-button {
     background: white;
+    bottom: -18px;
+    position: relative;
 }
 
 .search-button img {
@@ -73,12 +81,45 @@ header {
 
 .search-box {
     padding: 1em;
+    width: 50%;
     background: var(--858-light-gray-color);
 }
 
 .search-box::placeholder {
     color: black;
+    text-align: center;
+    font-size: 1.5em;
+    color: gray;
 }
-.video-thumbnail{
+@media screen and (max-width: 700px){
+    .search-box::placeholder {
+        font-size: 1em;
+    }
+}
+@media screen and (max-width: 400px){
+    .search-box::placeholder {
+        font-size: .75em;
+    }
+}
+/* Video item*/
+.video-thumbnail {
     max-width: 300px;
-}
\ No newline at end of file
+    transition: all .4s ease-in-out;
+}
+
+.video-thumbnail:hover {
+    transform: scale(1.1);
+}
+
+.video-thumbnail-container {
+    position: relative;
+    overflow: hidden;
+}
+
+/* section heading*/
+.section-title {
+    border-bottom: 2px dotted black;
+    padding: 1em;
+    margin-bottom: 1em;
+    position: relative;
+}