DEV Community

Sadeedpv
Sadeedpv

Posted on

Let's create youtube clone with Nextjs and tailwind-css (Part 2)

In the last part, we created the initial setup for our YouTube clone. Here is the link to the full-series.

In the last part, we created the sidebar, In this part, we will see how to build the header and make it mobile responsive with tailwind-css.

function Header() {

    // useState to control user input
    const [InputValue, setInputValue] = useState('');
    const [notification, setnotification] = useState(2);

    // Don't forget to import useRouter
    const router = useRouter();

    useEffect(() =>{
        // Set a random number for the notification
        setnotification(Math.floor(Math.random() * 10));
    }, [])

  return (
    <div className='flex items-center justify-between border-b-2 fixed 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'/>
            <Link href="/" ><h2 className='text-2xl text-black-600 font-bold tracking-tighter'>MeTube</h2></Link>
            <span className='absolute -right-2 -top-0.5 pl-4 opacity-50 text-[15px]'>IN</span>
        </div>
        {/* Query field */}
        <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'>
                <input type='text' 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]'
                value={InputValue}
                onChange={(e) =>{
                    setInputValue(e.target.value)
                }}
                onKeyDown={(e) =>{
                    if (e.key === 'Enter'){
                        router.push(`/?query=${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 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 name='Sadeed' size={35} round={true}/></div>
        </div>
        <ReactTooltip backgroundColor='#403e3f' isCapture/>
    </div>
  )
}
Enter fullscreen mode Exit fullscreen mode

Now that our header file is done, let's have a look at the body part:

function Body() {
  return (
    <div className="col-span-6 relative min-h-screen z-0">
        <Navbar />
        <VideoPlayer />
    </div>
  )
}
Enter fullscreen mode Exit fullscreen mode

In the Navbar component:

import React, {useEffect} from 'react'
import {Genres} from './Data/Genre'
import { useRouter } from 'next/router';


function 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((item, index) => {
            return <button key={index} className='border-[#0000001a] border-2 rounded-[16px] bg-[#0000000d] pl-2 pr-2 pt-1 pb-1 cursor-pointer last:mr-24 hover:bg-gray-200 active:bg-gray-900 active:text-white'
            onClick={() =>{
              router.push(`/?query=${item.toLowerCase()}`);
            }}
            >{item}</button>  
        })}

    </div>
  )
}
Enter fullscreen mode Exit fullscreen mode

Here is the genre file that contains all the data:

export const Genres = ['Gaming', 'Music', 'Movies', 'Books', 'Comics', 'Anime', 'Education', 'Sports','Science', 'Technology', 'Food', 'Travel', 'Health', 'Fashion', 'Finance', 'Politics', 'Art'];
Enter fullscreen mode Exit fullscreen mode

So far, our UI is almost done. Now, in the next part, we will work on the body component and we will learn how to fetch data and display all the videos.

Discussion (0)