style: update newsfeed layout

.vscode/settings.json

@@ -1,5 +1,12 @@
 {
-  "cSpell.words": ["clsx", "formik", "Shihab", "signup", "tailwindcss"],
+  "cSpell.words": [
+    "clsx",
+    "formik",
+    "newsfeed",
+    "Shihab",
+    "signup",
+    "tailwindcss"
+  ],
   "css.lint.unknownAtRules": "ignore",
   "editor.codeActionsOnSave": {
     "source.organizeImports": "always"

src/components/layouts/NewsFeedLayout.tsx

@@ -0,0 +1,23 @@
+import React, { PropsWithChildren } from 'react';
+import Navbar from '../atoms/navbar';
+import MainContentContainer from '../common';
+import LeftSidebar from '../organisms/newsfeed/LeftSidebar';
+import RightSidebar from '../organisms/newsfeed/RightSidebar';
+
+const NewsFeedLayout: React.FC<PropsWithChildren> = (props) => {
+  const { children } = props;
+  return (
+    <div className="w-full h-full flex flex-col">
+      <Navbar />
+      <MainContentContainer>
+        <div className="flex">
+          <LeftSidebar />
+          <div className="flex-1 ">{children}</div>
+          <RightSidebar />
+        </div>
+      </MainContentContainer>
+    </div>
+  );
+};
+
+export default NewsFeedLayout;

src/components/pages/home/LeftSidebar.tsx → src/components/organisms/newsfeed/LeftSidebar.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 
 const LeftSidebar: React.FC = () => {
   return (
-    <div className="w-9/12 h-auto py-3">
+    <div className="w-[22.5rem] h-auto py-3">
       <ul className="w-full text-gray-600">
         <li className="h-12 mb-2 flex items-center justify-content cursor-pointer space-x-2 p-2 rounded-md hover:bg-gray-200">
           <div>

src/components/pages/home/RightSidebar.tsx → src/components/organisms/newsfeed/RightSidebar.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 
 const RightSidebar: React.FC = () => {
   return (
-    <div className="w-9/12 h-auto py-3 pr-2">
+    <div className="w-[22.5rem] h-auto py-3 pr-2">
       <div className="w-full text-gray-600 border-b-2 pb-2 mb-2 border-gray-300">
         <p className="font-semibold mb-2">Your Pages</p>
         <li className="h-12 mb-2 flex items-center -ml-3 justify-content cursor-pointer space-x-2 p-2 rounded-md hover:bg-gray-200">

src/components/pages/newsfeed/index.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import NewsFeed from './NewsFeed';
+
+const NewsFeedPage: React.FC = () => {
+  return (
+    <div className="w-[42.5rem] m-auto">
+      <NewsFeed />
+    </div>
+  );
+};
+
+export default NewsFeedPage;

src/routes/Router.tsx

@@ -1,14 +1,14 @@
 import React from 'react';
 import { Route, Routes } from 'react-router-dom';
 import GamingPageLayout from '../components/layouts/GamingPageLayout';
-import HomePageLayout from '../components/layouts/HomePageLayout';
 import MarketplacePageLayout from '../components/layouts/MarketplacePage';
+import NewsFeedLayout from '../components/layouts/NewsFeedLayout';
 import ProfilePageLayout from '../components/layouts/ProfilePageLayout';
 import WatchPageLayout from '../components/layouts/WatchPageLayout';
 import GamingPage from '../components/pages/gaming';
-import HomePage from '../components/pages/home';
 import LoginPage from '../components/pages/login';
 import MarketplacePage from '../components/pages/marketplace';
+import NewsFeedPage from '../components/pages/newsfeed';
 import PageNotFound from '../components/pages/notfound';
 import ProfilePage from '../components/pages/profile';
 import RegisterPage from '../components/pages/signup';
@@ -33,8 +33,8 @@ const Routers: React.FC = () => {
       <Route
         path={HOME}
         element={
-          <PrivateRoute layout={HomePageLayout}>
-            <HomePage />
+          <PrivateRoute layout={NewsFeedLayout}>
+            <NewsFeedPage />
           </PrivateRoute>
         }
       />