From 396005c9fcc0ef69033f95299edfb5787319b930 Mon Sep 17 00:00:00 2001 From: Ahmed-Ayman Date: Thu, 6 Dec 2018 00:34:48 +0200 Subject: [PATCH] fix #5 create a Random Location, Topic static content --- src/assets/images/search.png | Bin 0 -> 13162 bytes src/components/RandomLocation.js | 31 ++++++++++++++++++++++++------- src/components/RandomTopic.js | 26 +++++++++++++++++++------- src/components/VideoItem.js | 12 ++++++++++++ src/stylesheets/style.css | 21 ++++++++++++++++++++- 5 files changed, 75 insertions(+), 15 deletions(-) create mode 100644 src/assets/images/search.png create mode 100644 src/components/VideoItem.js diff --git a/src/assets/images/search.png b/src/assets/images/search.png new file mode 100644 index 0000000000000000000000000000000000000000..6213eba21f7a5d4f77c8c75c1e7b1c28158a1671 GIT binary patch literal 13162 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 literal 0 HcmV?d00001 diff --git a/src/components/RandomLocation.js b/src/components/RandomLocation.js index 1493851..9c23200 100644 --- a/src/components/RandomLocation.js +++ b/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 ( +
+ + + + + + + +
+ ) + } } -} -export default (RandomLocation); \ No newline at end of file + +export default (RandomLocation); \ No newline at end of file diff --git a/src/components/RandomTopic.js b/src/components/RandomTopic.js index b758788..882b63b 100644 --- a/src/components/RandomTopic.js +++ b/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 ( + + + + + + + + ) + } } -} -export default (RandomTopic); \ No newline at end of file + +export default (RandomTopic); \ No newline at end of file diff --git a/src/components/VideoItem.js b/src/components/VideoItem.js new file mode 100644 index 0000000..1f61ea9 --- /dev/null +++ b/src/components/VideoItem.js @@ -0,0 +1,12 @@ +import React from 'react'; +class VideoItem extends React.Component{ +render(){ + return( +
+ +

Titleeeee #1

+
+ ) +} +} +export default (VideoItem); \ No newline at end of file diff --git a/src/stylesheets/style.css b/src/stylesheets/style.css index d42a669..c6f12b2 100644 --- a/src/stylesheets/style.css +++ b/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; +} \ No newline at end of file