Merge pull request #52 from PSS2134/Priyansh

Changed Navbar + Added Webseries + Added Anime Section + Changed Font

src/Components/MyTabs.jsx

@@ -6,6 +6,7 @@ import Bollywood from './Movie/Bollywood';
 import Tollywood from './Movie/Tollywood';
 import HollywoodWeb from './Web-Series/HollywoodWeb';
 import BollywoodWeb from './Web-Series/BollywoodWeb';
+import Anime from './Web-Series/Anime'
 
 const { TabPane } = Tabs;
 
@@ -45,6 +46,20 @@ const items = [
         label: "Bollywood",
         content: <BollywoodWeb />,
       },
+
+
+    ],
+  },{
+    key: "3",
+    label: "Anime",
+    children: [
+      {
+        key: "3-1",
+        label: "All",
+        content: <Anime />,
+      },
+
+
     ],
   },
 ];
@@ -53,7 +68,8 @@ const MyTabs = () => {
 
 
   return (
-
+   <>
+
         <Tabs defaultActiveKey="1" type="card" className='px-3'>
             {items.map((item) => (
               <TabPane tab={item.label} key={item.key}>
@@ -67,6 +83,7 @@ const MyTabs = () => {
               </TabPane>
             ))}
           </Tabs>
+          </>
 
   );
 };

src/Components/Navbar.css

@@ -0,0 +1,71 @@
+
+  @import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,400;0,500;0,600;0,700;1,500&display=swap');
+*{
+    font-family:'Montserrat','sans-serif';
+}
+.nav-flexbox{
+    /* background-color: blue; */
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 3vh;
+    font-size: 1.3rem;
+    box-shadow: 0 2px 9px 0 #00000080;
+    position: sticky;
+    cursor: pointer;
+}
+.nav-mid{
+    display: flex;
+    align-items: center;
+    font-size: 1.5rem ;
+    font-weight: 600;
+
+}
+.nav-right{
+    display: flex;
+    align-items: center;
+    font-weight: 600;
+    font-size: 1.5rem ;
+}
+.nav-mid-cont{
+    margin: 0 1vw;
+    color: black;
+
+}
+.nav-mid-cont:hover{
+    color: #3843dd;
+    transform: scale(1.1);
+
+}
+.nav-logo{
+    margin: 0;
+    font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
+    font-size: 2rem;
+    font-weight: 600;
+    color: #3340ee;
+
+}
+.nav-logo:hover{
+    color: #101aad;
+}
+.nav-search{
+    margin-right: 2vh;
+}
+.nav-search-input{
+    font-size: 1.25rem;
+    color: black;
+    border: 1px solid #d7a9eb;
+}
+.nav-search-input:focus{
+    border-color: #c15feb;
+}
+.search-location{
+    margin:0 0 0 5vw;
+    padding: 1vh 1.5vh;
+    border: 2px solid rgb(37, 220, 77);
+    border-radius: 5px 0px 0px 5px;
+    font-size: 1.3rem;
+}
+.search-location:focus{
+    outline: none;
+}

src/Components/Navbar.js

@@ -0,0 +1,88 @@
+import React,{useState} from 'react'
+import './Navbar.css'
+import heart from './heart.png'
+import heartw from './heart-white.png'
+import help from './help.png'
+import { NavLink, Link } from "react-router-dom";
+import styled from 'styled-components';
+import '../styles/styles.css';
+// import user from "../images/8.account.png";
+const Button = styled.div`
+  position: relative;
+  width: 40px;
+  height: 24px;
+  border-radius: 20px;
+  background: ${props => (props.checked ? "white" : "#1B1D29")};
+  cursor: pointer;
+  transition: all ${props => `${props.transition}ms`} ease;
+
+  input[type="checkbox"] {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    opacity: 0;
+    cursor: pointer;
+    z-index: 999;
+  }
+
+  span {
+    position: absolute;
+    top: 2px;
+    left: ${props => (props.checked ? "18px" : "2px")};
+    background: ${props => (props.checked ? "#1B1D29" : "white")};
+    width: 20px;
+    height: 20px;
+    border-radius: 50%;
+    transition: all ${props => `${props.transition}ms`} ease;
+  }
+  
+`;
+const Navbar = (props) => {
+    const[keyword,setKeyword]=useState("");
+    const [checked, setChecked] = useState(false);
+
+
+
+  return (
+    <div>
+      <div className='nav-flexbox'>
+        <Link to="/"><p className='nav-logo'>Movies Collection</p></Link>
+        <div className='nav-mid'>
+        <NavLink to='/'>{checked?<p className='nav-mid-cont' style={{'color':'white'}} >Home</p>:<p className='nav-mid-cont' >Home</p>}</NavLink>
+        <NavLink to='/about'>{checked?<p className='nav-mid-cont' style={{'color':'white'}} >About</p>:<p className='nav-mid-cont' >About</p>}</NavLink>
+        <NavLink to='/suggest'>{checked?<p className='nav-mid-cont' style={{'color':'white'}} >Suggest</p>:<p className='nav-mid-cont' >Suggest</p>}</NavLink>
+
+        </div>
+
+        <div className='nav-right'>
+
+
+                  <div>
+                  <Link to="#" >
+                  {checked?<p className='nav-mid-cont' style={{'color':'white'}} >SignIn</p>:<p className='nav-mid-cont' >SignIn</p>}
+                  </Link>
+                </div>
+
+
+           <Link to="/list">{checked?<p className='nav-mid-cont'><img src={heartw}  width={30}/></p>:<p className='nav-mid-cont'><img src={heart}  width={30}/></p>}</Link> 
+           <Button className='nav-mid-cont' checked={checked} transition={300}>
+     <input
+       type="checkbox"
+        checked={checked}
+       onChange={() => setChecked(!checked)}
+        onClick={props.togglemode}
+     />
+     <span />
+   </Button>
+
+            {/* <p className='nav-mid-cont'><img src={help} width={30}/></p> */}
+
+        </div>
+
+
+      </div>
+    </div>
+  )
+}
+
+export default Navbar