35_b_post info

src/components/PostInfo/PostInfo.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import Avatar from '@mui/material/Avatar';
+import Box from '@mui/material/Box';
+import Typography from '@mui/material/Typography';
+
+interface PostINfoProps {
+    userName: string;
+    description: string;
+    data: string;
+    image: string;
+}
+
+const PostInfo: React.FC<PostINfoProps> = ({ image, userName, description, data }) => {
+    return (
+        <>
+            <Box sx={{
+                display: "flex",
+                flexDirection: "row",
+                alignItems: "center"
+            }}>
+                <Avatar alt="Remy Sharp" src={image} sx={{ height: '60px', width: '60px' }} />
+                <Typography variant="h4" sx={{fontSize: "18px", width: "90%"}} align="center">{userName}</Typography>
+            </Box>
+            <Typography variant="body1" sx={{fontSize: "13px", marginTop: "10px"}}>{description}</Typography>
+            <Typography variant="body1" sx={{fontSize: "13px", marginTop: "15px"}}>###{data}</Typography>
+        </>
+    )
+}
+
+export default PostInfo;

src/components/PostInfo/index.ts

@@ -0,0 +1 @@
+export {default} from './PostInfo'

src/pages/Home.js

@@ -1,4 +1,5 @@
 import Stack from '@mui/material/Stack';
+import PostInfo from 'components/PostInfo';
 
 const Home = () => {
     return (
@@ -9,6 +10,7 @@ const Home = () => {
             </Stack>
             <Stack width="300px">
                 {/* All Sidebar related things go here */}
+                <PostInfo userName="Manuel XXX" description="askdaklsdjawdadsfdsvgbftnrt"/>
                 Sidebar
             </Stack>
         </Stack>

src/utils/index.js

@@ -2,5 +2,5 @@ export const getUserId = () => {
     const serializedUser = localStorage.getItem('user');
     const user = JSON.parse(serializedUser);
 
-    return user.id;
+    return user?.id;
 };