Built Twitter Like App - 2

Add basic layout

Add file components/Layout.tsx:

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> 
            </div>  
        </div>
     </div>
   );
}

export default Layout;

Add file conmponent/layout/Sidebar.tsx:

const Sidebar = () => {
    return(
        <div>

        </div>
    );
}

export default Sidebar

modify pages/_app.tsx:

import '../styles/globals.css'
import type { AppProps } from 'next/app'

import Layout from '../components/Layout'

export default function App({ Component, pageProps }: AppProps) {
  return (
    <Layout>
      <Component {...pageProps} />
    </Layout>
  )
}

2nd Test Run