Final Commit

package.json

@@ -10,6 +10,7 @@
  "@testing-library/user-event": "^7.2.1",
  "react": "^16.13.1",
  "react-dom": "^16.13.1",
+ "react-router-dom": "^5.2.0",
  "react-scripts": "3.4.1"
  },
  "scripts": {

src/App.js

@@ -2,19 +2,33 @@ import React from 'react';
 import './App.css'
 import Header from './Header';
 import Sidebar from './Sidebar';
+import SearchPage from './SearchPage';
+
 import RecommendedVideos from './RecommendedVideos';
+import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
 
 import './App.css';
 
 function App() {
  return (
  <div className="app">
- <Header/>
- <div className="app_page">
- <Sidebar/>
- <RecommendedVideos/>
- </div>
-
+ <Router>
+ <Header/>
+ <Switch>
+ <Route path="/search/:searchTerm">
+ <div className="app_page">
+ <Sidebar/>
+ <SearchPage/>
+ </div>
+ </Route>
+ <Route path="/">
+ <div className="app_page">
+ <Sidebar/>
+ <RecommendedVideos/>
+ </div>
+ </Route>
+ </Switch>
+ </Router>
  </div>
  );
 }

src/ChannelRow.css

@@ -0,0 +1,27 @@
+.channelRow {
+ display: flex;
+ align-items: center;
+ width: 70%;
+}
+
+.channelRow_text {
+ display: flex;
+ flex-direction: column;
+}
+
+.channelRow_text > p {
+ color: #606060;
+ font-size: small !important;
+}
+
+.channelRow_logo {
+ height: 120px !important;
+ width: 120px !important;
+ margin: 10px 60px;
+}
+
+.channelRow_text > h4 {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+}

src/ChannelRow.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import './ChannelRow.css';
+import { Avatar } from '@material-ui/core';
+import VerifiedIcon from '@material-ui/icons/CheckCircleOutlineOutlined';
+
+function ChannelRow({image, channel, verified, subs, noOfVideos, description}) {
+ return (
+ <div className="channelRow">
+ <Avatar className="channelRow_logo"
+ alt={channel} src={image}
+ />
+ <div className="channelRow_text"> 
+ <h4>{channel} {verified && <VerifiedIcon/>} </h4>
+ <p>{subs} subscribers • {noOfVideos} videos</p>
+ <p>{description}</p>
+ </div>
+ </div>
+ )
+}
+
+export default ChannelRow;

src/Header.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, {useState} from 'react';
 import './Header.css';
 
 import MenuIcon from '@material-ui/icons/Menu';
@@ -7,23 +7,31 @@ import VideoCallIcon from '@material-ui/icons/VideoCall';
 import AppsIcon from '@material-ui/icons/Apps';
 import NotificationsIcon from '@material-ui/icons/Notifications';
 import Avatar from '@material-ui/core/Avatar';
-
+import { Link } from "react-router-dom";
 
 function Header() {
+ const [inputSearch, setInputSearch] = useState("");
  return (
  <div className= "header">
  <div className= "header_left">
- <MenuIcon/>
- <img 
- className="header_logo"
- src='https://cdn.worldvectorlogo.com/logos/youtube-2.svg' 
- alt=''
- />
+ <MenuIcon/>
+ <Link to="/"> 
+ <img 
+ className="header_logo"
+ src='https://cdn.worldvectorlogo.com/logos/youtube-2.svg' 
+ alt=''
+ />
+ </Link>
  </div>
-
  <div className= "header_input">
- <input placeholder='Search' type='text'/> 
- <SearchIcon className= "header_inputButton"/> 
+ <input
+ placeholder='Search' 
+ type='text'
+ onChange={e => setInputSearch(e.target.value)}
+ /> 
+ <Link to={`/search/${inputSearch}`}>
+ <SearchIcon className= "header_inputButton"/> 
+ </Link>
  </div>
 
  <div className= "header_icons">

src/SearchPage.css

@@ -0,0 +1,24 @@
+.searchPage {
+ flex: 0.8;
+ background-color: #f9f9f9;
+ padding: 20px 20px;
+}
+
+.searchPage_filter {
+ display:flex;
+ align-items: center;
+ color: #606060;
+ font-size: xx-small !important;
+}
+
+.searchPage_filter > h2 {
+ margin-left: 10px;
+}
+
+.searchPage > hr {
+ height: 1px;
+ border: 0;
+ background-color: lightgray;
+ margin-top: 10px;
+ margin-bottom: 10px;
+}

src/SearchPage.js

@@ -0,0 +1,39 @@
+import React from 'react';
+import ChannelRow from './ChannelRow';
+import VideoRow from './VideoRow';
+
+import TuneOutlinedIcon from "@material-ui/icons/TuneOutlined";
+import './SearchPage.css';
+import { Link } from '@material-ui/core';
+
+function SearchPage() {
+ return (
+ <div className="searchPage">
+ <div className="searchPage_filter">
+ <TuneOutlinedIcon/>
+ <h2>FILTER</h2>
+ </div>
+ <hr/>
+ <ChannelRow
+ image="https://avatars1.githubusercontent.com/u/39636292?s=460&u=a29bef077d71d9e8eff9624c63d6451cbd8f79df&v=4"
+ channel="Hasan Tunc"
+ verified
+ subs="3M"
+ noOfVideos={422}
+ description="You can find awesome programming videos."
+ />
+ <hr/>
+ <VideoRow
+ title="React Courses"
+ views="2.3M Views"
+ timestamp="3 days ago"
+ channel="Hasan Tunc"
+ image="https://i.ytimg.com/vi/DLX62G4lc44/maxresdefault.jpg"
+ description="Let's get started to React."
+ subs="1M"
+ />
+ </div>
+ )
+}
+
+export default SearchPage;

src/VideoRow.css

@@ -0,0 +1,38 @@
+.videoRow {
+ display: flex;
+ margin-bottom: 30px;
+ max-width: 700px;
+}
+
+.videoRow > img {
+ object-fit: contain;
+ width: 246px;
+ height: 138px;
+}
+
+.videoRow_text {
+ margin-left: 14px;
+ font-size: 16px;
+ color: #606060;
+}
+
+.videoRow_headline {
+ font-size: 14px;
+ color: #606060;
+}
+
+.videoRow_description {
+ margin-top: 20px;
+ font-size: 14px;
+ color: #606060;
+}
+
+.videoRow_subsNumber {
+ font-weight: bolder;
+ color: rgb(84, 157, 211);
+}
+
+.videoRow_subs {
+ background-color: lightgray;
+ padding: 2px;
+}