Added VideoCard to Recommended area

tunchasan · Jul 30, 2020 · 0578f54 · 0578f54
1 parent 129bb60
commit 0578f54
Show file tree

Hide file tree

Showing 2 changed files with 81 additions and 2 deletions.
diff --git a/src/RecommendedVideos.css b/src/RecommendedVideos.css
@@ -1,4 +1,16 @@
 .recommendedVideos {
- border: 1px solid black;
  flex: 0.8;
+ background-color: #f9f9f9;
+ padding: 20px 20px;
+ padding-bottom: 0;
+}
+
+.recommendedVideos > h2 { 
+ margin-left: 5px;
+ margin-bottom: 20px;
+}
+
+.recommendedVideos_videos {
+ display: flex;
+ flex-wrap: wrap;
 }
diff --git a/src/RecommendedVideos.js b/src/RecommendedVideos.js
@@ -1,10 +1,77 @@
 import React from 'react'
+import VideoCard from './VideoCard';
 import './RecommendedVideos.css';
 
 function RecommendedVideos() {
  return (
  <div className='recommendedVideos'>
- <h1>This is where videos go</h1>
+ <h2>Recommended</h2>
+ <div className="recommendedVideos_videos">
+ <VideoCard
+ title="React Courses"
+ views="2.3M Views"
+ timestapms="3 days ago"
+ channelImage="https://avatars1.githubusercontent.com/u/39636292?s=460&u=a29bef077d71d9e8eff9624c63d6451cbd8f79df&v=4"
+ channel="Hasan Tunc"
+ image="https://i.ytimg.com/vi/DLX62G4lc44/maxresdefault.jpg"
+ />
+ <VideoCard
+ title="React Courses"
+ views="2.3M Views"
+ timestapms="3 days ago"
+ channelImage="https://avatars1.githubusercontent.com/u/39636292?s=460&u=a29bef077d71d9e8eff9624c63d6451cbd8f79df&v=4"
+ channel="Hasan Tunc"
+ image="https://i.ytimg.com/vi/DLX62G4lc44/maxresdefault.jpg"
+ />
+ <VideoCard
+ title="React Courses"
+ views="2.3M Views"
+ timestapms="3 days ago"
+ channelImage="https://avatars1.githubusercontent.com/u/39636292?s=460&u=a29bef077d71d9e8eff9624c63d6451cbd8f79df&v=4"
+ channel="Hasan Tunc"
+ image="https://i.ytimg.com/vi/DLX62G4lc44/maxresdefault.jpg"
+ />
+ <VideoCard
+ title="React Courses"
+ views="2.3M Views"
+ timestapms="3 days ago"
+ channelImage="https://avatars1.githubusercontent.com/u/39636292?s=460&u=a29bef077d71d9e8eff9624c63d6451cbd8f79df&v=4"
+ channel="Hasan Tunc"
+ image="https://i.ytimg.com/vi/DLX62G4lc44/maxresdefault.jpg"
+ />
+ <VideoCard
+ title="React Courses"
+ views="2.3M Views"
+ timestapms="3 days ago"
+ channelImage="https://avatars1.githubusercontent.com/u/39636292?s=460&u=a29bef077d71d9e8eff9624c63d6451cbd8f79df&v=4"
+ channel="Hasan Tunc"
+ image="https://i.ytimg.com/vi/DLX62G4lc44/maxresdefault.jpg"
+ />
+ <VideoCard
+ title="React Courses"
+ views="2.3M Views"
+ timestapms="3 days ago"
+ channelImage="https://avatars1.githubusercontent.com/u/39636292?s=460&u=a29bef077d71d9e8eff9624c63d6451cbd8f79df&v=4"
+ channel="Hasan Tunc"
+ image="https://i.ytimg.com/vi/DLX62G4lc44/maxresdefault.jpg"
+ />
+ <VideoCard
+ title="React Courses"
+ views="2.3M Views"
+ timestapms="3 days ago"
+ channelImage="https://avatars1.githubusercontent.com/u/39636292?s=460&u=a29bef077d71d9e8eff9624c63d6451cbd8f79df&v=4"
+ channel="Hasan Tunc"
+ image="https://i.ytimg.com/vi/DLX62G4lc44/maxresdefault.jpg"
+ />
+ <VideoCard
+ title="React Courses"
+ views="2.3M Views"
+ timestapms="3 days ago"
+ channelImage="https://avatars1.githubusercontent.com/u/39636292?s=460&u=a29bef077d71d9e8eff9624c63d6451cbd8f79df&v=4"
+ channel="Hasan Tunc"
+ image="https://i.ytimg.com/vi/DLX62G4lc44/maxresdefault.jpg"
+ />
+ </div> 
  </div>
  )
 }