diff --git a/src/App.js b/src/App.js index 366df08..dae3eed 100644 --- a/src/App.js +++ b/src/App.js @@ -1,7 +1,8 @@ import "./App.css"; +import Layout from "./components/Layout"; function App() { - return
Hello
; + return ; } export default App; diff --git a/src/components/Header.js b/src/components/Header.js index e69de29..fd7b423 100644 --- a/src/components/Header.js +++ b/src/components/Header.js @@ -0,0 +1,79 @@ +import React from "react"; +import Logo from "../assets/youtube_logo.jpg"; +import { useDispatch } from "react-redux"; +import { toggleMenu } from "../redux/appSlice"; + +const Header = () => { + const dispatch = useDispatch(); + + const handleToggleMenu = () => { + dispatch(toggleMenu()); + }; + + return ( +
+
+
+ + + +
+ youtube_logo +
+
+ + +
+
+ + + +
+
+ ); +}; + +export default Header; diff --git a/src/components/Layout.js b/src/components/Layout.js new file mode 100644 index 0000000..2f2656c --- /dev/null +++ b/src/components/Layout.js @@ -0,0 +1,27 @@ +import React from "react"; +import Header from "./Header"; +import Sidebar from "./Sidebar"; +import SearchButtons from "./SearchButtons"; +import MainComponent from "./MainComponent"; + +const Layout = () => { + return ( +
+
+
+
+ +
+
+ + +
+
+
+ +
+
+ ); +}; + +export default Layout; diff --git a/src/components/MainComponent.js b/src/components/MainComponent.js new file mode 100644 index 0000000..9f59a8b --- /dev/null +++ b/src/components/MainComponent.js @@ -0,0 +1,18 @@ +import React from "react"; +import { useSelector } from "react-redux"; + +const MainComponent = () => { + const { isMenuOpen } = useSelector((store) => store.app); + + return ( +
+ ); +}; + +export default MainComponent; diff --git a/src/components/SearchButtons.js b/src/components/SearchButtons.js new file mode 100644 index 0000000..d05d14a --- /dev/null +++ b/src/components/SearchButtons.js @@ -0,0 +1,48 @@ +import React from "react"; +import { useSelector } from "react-redux"; + +const suggestions = [ + "All", + "Music", + "Computer Programming", + "Comedy", + "News", + "Podcasts", + "Coding", + "Modi", + "Cricket", + "Movies", + "ReactJS tutorials", + "Podcasts", + "Coding", + "Modi", + "Cricket", + "Movies", + "ReactJS tutorials", +]; + +const SearchButtons = () => { + const { isMenuOpen } = useSelector((store) => store.app); + return ( +
+ {suggestions.map((suggestion, id) => { + return ( + + ); + })} +
+ ); +}; + +export default SearchButtons; diff --git a/src/components/Sidebar.js b/src/components/Sidebar.js new file mode 100644 index 0000000..42ff679 --- /dev/null +++ b/src/components/Sidebar.js @@ -0,0 +1,163 @@ +import React from "react"; +import HomeOutlined from "../assets/homeOutlined.svg"; +import shortsOutlined from "../assets/shortsOutlined.svg"; +import subscriptionsOutlined from "../assets/subscriptionsOutlined.svg"; +import library from "../assets/library.svg"; +import yourChannel from "../assets/yourChannel.svg"; +import history from "../assets/history.svg"; +import yourVideos from "../assets/yourVideos.svg"; +import watchLater from "../assets/watchLater.svg"; +import trending from "../assets/trending.svg"; +import shopping from "../assets/shopping.svg"; +import music from "../assets/music.svg"; +import movies from "../assets/movies.svg"; +import live from "../assets/live.svg"; +import gaming from "../assets/gaming.svg"; +import news from "../assets/news.svg"; +import sports from "../assets/sports.svg"; +import learning from "../assets/learning.svg"; +import fashion from "../assets/fashion.svg"; +import podcasts from "../assets/podcasts.svg"; +import { useSelector } from "react-redux"; +import SidebarList from "./SidebarList"; + +const sidebarContents = [ + { + id: 1, + title: "Home", + icon: HomeOutlined, + }, + { + id: 2, + title: "Shorts", + icon: shortsOutlined, + }, + { + id: 3, + title: "Subscriptions", + icon: subscriptionsOutlined, + }, + { + id: 4, + title: "Library", + icon: library, + }, + { + id: 5, + title: "Your channel", + icon: yourChannel, + }, + { + id: 6, + title: "History", + icon: history, + }, + { + id: 7, + title: "Your videos", + icon: yourVideos, + }, + { + id: 8, + title: "Watch later", + icon: watchLater, + }, + { + id: 9, + title: "Trending", + icon: trending, + }, + { + id: 10, + title: "Shopping", + icon: shopping, + }, + { + id: 11, + title: "Music", + icon: music, + }, + { + id: 12, + title: "Movies", + icon: movies, + }, + { + id: 13, + title: "Live", + icon: live, + }, + { + id: 14, + title: "Gaming", + icon: gaming, + }, + { + id: 15, + title: "News", + icon: news, + }, + { + id: 16, + title: "Sports", + icon: sports, + }, + { + id: 17, + title: "Learning", + icon: learning, + }, + { + id: 18, + title: "Fashion & Beauty", + icon: fashion, + }, + { + id: 19, + title: "Podcasts", + icon: podcasts, + }, +]; + +const Sidebar = () => { + const { isMenuOpen } = useSelector((store) => store.app); + + return ( + <> + + + ); +}; + +export default Sidebar; diff --git a/src/components/SidebarList.js b/src/components/SidebarList.js new file mode 100644 index 0000000..48534fd --- /dev/null +++ b/src/components/SidebarList.js @@ -0,0 +1,30 @@ +import React from "react"; +import { useSelector } from "react-redux"; + +const SidebarList = ({ title, icon, id }) => { + const { isMenuOpen } = useSelector((store) => store.app); + + return ( +
+ +

+ {title} +

+
+ ); +}; + +export default SidebarList; diff --git a/src/index.css b/src/index.css index b5c829e..834154b 100644 --- a/src/index.css +++ b/src/index.css @@ -2,8 +2,37 @@ @tailwind components; @tailwind utilities; +@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap"); + * { margin: 0; padding: 0; box-sizing: border-box; + font-family: "Roboto", sans-serif; +} + +.search-buttons::-webkit-scrollbar { + display: none; +} + +.sidebar:hover::-webkit-scrollbar { + display: block; +} + +.sidebar::-webkit-scrollbar { + display: none; +} + +::-webkit-scrollbar { + width: 10px; + border-radius: 20px; +} + +::-webkit-scrollbar-track { + background: #fff; +} + +::-webkit-scrollbar-thumb { + background: #888; + border-radius: 20px; } diff --git a/src/index.js b/src/index.js index d563c0f..2ec9141 100644 --- a/src/index.js +++ b/src/index.js @@ -1,14 +1,16 @@ -import React from 'react'; -import ReactDOM from 'react-dom/client'; -import './index.css'; -import App from './App'; -import reportWebVitals from './reportWebVitals'; +import React from "react"; +import ReactDOM from "react-dom/client"; +import "./index.css"; +import App from "./App"; +import reportWebVitals from "./reportWebVitals"; +import { Provider } from "react-redux"; +import store from "./redux/store"; -const root = ReactDOM.createRoot(document.getElementById('root')); +const root = ReactDOM.createRoot(document.getElementById("root")); root.render( - + - + ); // If you want to start measuring performance in your app, pass a function diff --git a/src/pages/Home.js b/src/pages/Home.js new file mode 100644 index 0000000..9be6a2d --- /dev/null +++ b/src/pages/Home.js @@ -0,0 +1,70 @@ +import React from "react"; + +const Home = () => { + return ( +
+
+ Lorem, ipsum dolor sit amet consectetur adipisicing elit. Accusamus quas + sapiente rem eum. Et, dolorem sed dolor quod doloribus facilis minus + debitis qui, vitae, ex cupiditate nesciunt excepturi consequatur commodi + sequi ipsum? Optio dolorem, beatae maxime voluptatem atque unde nam + placeat error dignissimos doloremque quia labore quisquam iure + quibusdam! Modi a, fugiat deserunt cupiditate neque ut facilis unde? + Tenetur fuga saepe harum aliquid minima? In sunt minima nostrum eos, + error explicabo suscipit voluptatibus, accusamus neque minus + consectetur, aperiam quibusdam sapiente ullam veritatis deserunt! Sed + sapiente praesentium provident molestias corporis facere. +
+
+ Lorem, ipsum dolor sit amet consectetur adipisicing elit. Accusamus quas + sapiente rem eum. Et, dolorem sed dolor quod doloribus facilis minus + debitis qui, vitae, ex cupiditate nesciunt excepturi consequatur commodi + sequi ipsum? Optio dolorem, beatae maxime voluptatem atque unde nam + placeat error dignissimos doloremque quia labore quisquam iure + quibusdam! Modi a, fugiat deserunt cupiditate neque ut facilis unde? + Tenetur fuga saepe harum aliquid minima? In sunt minima nostrum eos, + error explicabo suscipit voluptatibus, accusamus neque minus + consectetur, aperiam quibusdam sapiente ullam veritatis deserunt! Sed + sapiente praesentium provident molestias corporis facere. +
+
+ Lorem, ipsum dolor sit amet consectetur adipisicing elit. Accusamus quas + sapiente rem eum. Et, dolorem sed dolor quod doloribus facilis minus + debitis qui, vitae, ex cupiditate nesciunt excepturi consequatur commodi + sequi ipsum? Optio dolorem, beatae maxime voluptatem atque unde nam + placeat error dignissimos doloremque quia labore quisquam iure + quibusdam! Modi a, fugiat deserunt cupiditate neque ut facilis unde? + Tenetur fuga saepe harum aliquid minima? In sunt minima nostrum eos, + error explicabo suscipit voluptatibus, accusamus neque minus + consectetur, aperiam quibusdam sapiente ullam veritatis deserunt! Sed + sapiente praesentium provident molestias corporis facere. +
+
+ Lorem, ipsum dolor sit amet consectetur adipisicing elit. Accusamus quas + sapiente rem eum. Et, dolorem sed dolor quod doloribus facilis minus + debitis qui, vitae, ex cupiditate nesciunt excepturi consequatur commodi + sequi ipsum? Optio dolorem, beatae maxime voluptatem atque unde nam + placeat error dignissimos doloremque quia labore quisquam iure + quibusdam! Modi a, fugiat deserunt cupiditate neque ut facilis unde? + Tenetur fuga saepe harum aliquid minima? In sunt minima nostrum eos, + error explicabo suscipit voluptatibus, accusamus neque minus + consectetur, aperiam quibusdam sapiente ullam veritatis deserunt! Sed + sapiente praesentium provident molestias corporis facere. +
+
+ Lorem, ipsum dolor sit amet consectetur adipisicing elit. Accusamus quas + sapiente rem eum. Et, dolorem sed dolor quod doloribus facilis minus + debitis qui, vitae, ex cupiditate nesciunt excepturi consequatur commodi + sequi ipsum? Optio dolorem, beatae maxime voluptatem atque unde nam + placeat error dignissimos doloremque quia labore quisquam iure + quibusdam! Modi a, fugiat deserunt cupiditate neque ut facilis unde? + Tenetur fuga saepe harum aliquid minima? In sunt minima nostrum eos, + error explicabo suscipit voluptatibus, accusamus neque minus + consectetur, aperiam quibusdam sapiente ullam veritatis deserunt! Sed + sapiente praesentium provident molestias corporis facere. +
+
+ ); +}; + +export default Home; diff --git a/src/redux/appSlice.js b/src/redux/appSlice.js new file mode 100644 index 0000000..9502182 --- /dev/null +++ b/src/redux/appSlice.js @@ -0,0 +1,17 @@ +import { createSlice } from "@reduxjs/toolkit"; + +const appSlice = createSlice({ + name: "app", + initialState: { + isMenuOpen: false, + }, + reducers: { + toggleMenu: (state) => { + state.isMenuOpen = !state.isMenuOpen; + }, + }, +}); + +export const { toggleMenu } = appSlice.actions; + +export default appSlice.reducer; diff --git a/src/redux/store.js b/src/redux/store.js new file mode 100644 index 0000000..943f5e6 --- /dev/null +++ b/src/redux/store.js @@ -0,0 +1,10 @@ +import { configureStore } from "@reduxjs/toolkit"; +import appReducer from "./appSlice"; + +const store = configureStore({ + reducer: { + app: appReducer, + }, +}); + +export default store;