+
+
+ )
+ }
+}
+
+export default App;
\ No newline at end of file
diff --git a/src/components/Searchbar.js b/src/components/Searchbar.js
new file mode 100644
index 0000000..c71bf45
--- /dev/null
+++ b/src/components/Searchbar.js
@@ -0,0 +1,32 @@
+import React from 'react';
+
+class Searchbar extends React.Component {
+ handleChange = (event) => {
+ this.setState({
+ term: event.target.value
+ });
+
+ };
+ handleSubmit = event => {
+ event.preventDefault();
+ this.props.handleFormSubmit(this.state.term);
+ }
+
+ render() {
+
+ return (
+ <>
+
+
+
+
+
+
+
+
+
+
+ 
+
+
+
+ )
+ }
+}
+export default Searchbar;
\ No newline at end of file
diff --git a/src/components/VideoDetail.js b/src/components/VideoDetail.js
new file mode 100644
index 0000000..c306fa8
--- /dev/null
+++ b/src/components/VideoDetail.js
@@ -0,0 +1,32 @@
+import React from "react";
+
+const VideoDetail = ({ video }) => {
+ if (!video) {
+ return
+
+
;
+ }
+
+ const videoSrc = `https://www.youtube.com/embed/${video.id.videoId}`;
+ console.log(typeof video);
+ return (
+ Enter search keyword to load...
++
+ Use the API to search for videos matching specific search terms, topics, locations, publication dates, and much more. The APIs search.list method also supports searches for playlists and channels. + + With the YouTube Data API, you can add a variety of YouTube features to your application. Use the API to upload videos, manage playlists and subscriptions, update channel settings, and more. + +
+
+
+ );
+};
+
+export default VideoDetail;
diff --git a/src/components/VideoItem.js b/src/components/VideoItem.js
new file mode 100644
index 0000000..1b22fd4
--- /dev/null
+++ b/src/components/VideoItem.js
@@ -0,0 +1,14 @@
+import React from 'react';
+import '../style/video.css';
+
+const VideoItem = ({video , handleVideoSelect}) => {
+ return (
+
+
+
+
+
+ {video.snippet.title}
+{video.snippet.description}
+ handleVideoSelect(video)} className=' video-item item'>
+ 
+
+ )
+};
+export default VideoItem;
\ No newline at end of file
diff --git a/src/components/VideoList.js b/src/components/VideoList.js
new file mode 100644
index 0000000..1e58683
--- /dev/null
+++ b/src/components/VideoList.js
@@ -0,0 +1,12 @@
+import React from 'react';
+import VideoItem from './VideoItem';
+
+const VideoList = ({videos , handleVideoSelect}) => {
+ const renderedVideos = videos.map((video) => {
+ return
+
+ {video.snippet.title}
+ {renderedVideos}
;
+};
+export default VideoList;
\ No newline at end of file
diff --git a/src/components/assets/youtube.png b/src/components/assets/youtube.png
new file mode 100644
index 0000000..5924c8d
Binary files /dev/null and b/src/components/assets/youtube.png differ
diff --git a/src/index.js b/src/index.js
new file mode 100644
index 0000000..ae64cd3
--- /dev/null
+++ b/src/index.js
@@ -0,0 +1,8 @@
+import React from 'react' ;
+import ReactDOM from 'react-dom';
+import App from './components/App';
+
+
+ReactDOM.render(
+