Within the final half, we created the preliminary setup for our YouTube clone. Right here is the hyperlink to the full-series.
Within the final half, we created the sidebar, On this half, we are going to see learn how to construct the header and make it cell responsive with tailwind-css.
operate Header() {
// useState to regulate person enter
const [InputValue, setInputValue] = useState('');
const [notification, setnotification] = useState(2);
// Remember to import useRouter
const router = useRouter();
useEffect(() =>{
// Set a random quantity for the notification
setnotification(Math.ground(Math.random() * 10));
}, [])
return (
<div className="flex items-center justify-between border-b-2 fastened top-0 left-0 right-0 z-20 bg-white">
{/* tailwind css hamburger menu */}
<div className="flex cursor-pointer justify-between h-[1.2rem] w-[1.5rem] flex-col ml-2 group md:ml-7"
>
<div className="border-r-1 h-[2px] bg-gray-700 group-hover:bg-gray-500"></div>
<div className="border-r-1 h-[2px] bg-gray-700 group-hover:bg-gray-500"></div>
<div className="border-r-1 h-[2px] bg-gray-700 group-hover:bg-gray-500"></div>
</div>
{/* Header / Youtubelogo */}
<div className="flex items-center justify-center relative ml-1 pt-1 hover:text-gray-800">
<BsYoutube className="text-4xl text-red-600 pr-1"/>
<Hyperlink href="https://dev.to/" ><h2 className="text-2xl text-black-600 font-bold tracking-tighter">MeTube</h2></Hyperlink>
<span className="absolute -right-2 -top-0.5 pl-4 opacity-50 text-[15px]">IN</span>
</div>
{/* Question subject */}
<div className="flex items-center justify-center focus:outline-none focus:bg-gray-300">
<div className="flex items-center justify-center bg-gray-200 rounded-lg mr-2 my-2">
<enter sort="textual content" placeholder="Search"
className="bg-gray-200 rounded-lg px-4 py-2 w-20 text-gray-800 md:w-[20em] focus:outline-none lg:w-[35em]"
worth={InputValue}
onChange={(e) =>{
setInputValue(e.goal.worth)
}}
onKeyDown={(e) =>{
if (e.key === 'Enter'){
router.push(`/?question=${InputValue.toLowerCase()}`);
}
}}
/>
<BsSearch className="mr-3" />
</div>
<BsMicFill className="text-2xl mr-3 hidden md:block" />
</div>
{/* Avatar from react-avatar */}
<div className="flex items-center justify-between">
<BsCameraVideo className="hidden md:block text-3xl mr-7" data-tip='Add a brand new Video' />
<div className="relative mr-3 md:mr-7">
<BsBell className="text-2xl md:text-3xl" data-tip="Notifications"/>
<span className="absolute -top-3 -right-1 w-4 h-4 text-center flex items-center justify-center rounded-full bg-red-600 p-3 text-[12px] text-white ">{notification}</span>
</div>
<div className="mr-5 md:mr-7 " data-tip='Your account'><Avatar identify="Sadeed" dimension={35} spherical={true}/></div>
</div>
<ReactTooltip backgroundColor="#403e3f" isCapture/>
</div>
)
}
Now that our header file is finished, let’s take a look on the physique half:
operate Physique() {
return (
<div className="col-span-6 relative min-h-screen z-0">
<Navbar />
<VideoPlayer />
</div>
)
}
Within the Navbar element:
import React, {useEffect} from 'react'
import {Genres} from './Knowledge/Style'
import { useRouter } from 'subsequent/router';
operate Navbar() {
const router = useRouter();
return (
<div className="flex overflow-x-scroll items-center gap-6 scrollbar-hide w-screen border-b-2 mb-2 pb-4">
{Genres && Genres.map((merchandise, index) => {
return <button key={index} className="border-[#0000001a] border-2 rounded-[16px] bg-[#0000000d] pl-2 pr-2 pt-1 pb-1 cursor-pointer final:mr-24 hover:bg-gray-200 energetic:bg-gray-900 energetic:text-white"
onClick={() =>{
router.push(`/?question=${merchandise.toLowerCase()}`);
}}
>{merchandise}</button>
})}
</div>
)
}
Right here is the style file that comprises all the info:
export const Genres = ['Gaming', 'Music', 'Movies', 'Books', 'Comics', 'Anime', 'Education', 'Sports','Science', 'Technology', 'Food', 'Travel', 'Health', 'Fashion', 'Finance', 'Politics', 'Art'];
Up to now, our UI is sort of finished. Now, within the subsequent half, we are going to work on the physique element and we are going to learn to fetch information and show all of the movies.
