Built Twitter Like App - 4

Add FollowBar

Modify file conmponent/Layout.tsx:

import FollowBar from "./layout/FollowBar";
import Sidebar from "./layout/Siderbar";

interface LayoutProps{
    children: React.ReactNode;
}

const Layout:React.FC<LayoutProps> = ({ children }) => {
   return (
     <div className="h-screen bg-black">
        <div className="container h-full mx-auto xl:px-30 max-w-6xl">
            <div className="grid grid-cols-4 h-full">
                <Sidebar />
                <div className="
                   col-span-3
                   lg:col-span-2
                   border-x-[1px]
                   border-neutral-800
                ">
                    { children }
                </div> 
                <FollowBar />
            </div>  
        </div>
     </div>
   );
}

export default Layout;

Add file conmponent/layout/FollowBar.tsx:

const FollowBar =() =>{
   return (
    <div className="px-6 py-4 hidden lg:block">
      <div className="bg-neutral-800 rounded-xl p-4">
        <h2 className="text-white text-xl font-semibold">Who to follow</h2>
        <div className="flex flex-col gap-6 mt-4">
            {/* TODO User List */}
        </div>
     </div>
   </div>
   );
}
 
export default FollowBar