Added MaterialUI

client/src/components/profile/ProfileTop.tsx

@@ -1,3 +1,4 @@
+import { Avatar, Box, Card, CardHeader, Typography } from "@mui/material";
 import React from "react";
 import { ProfileType } from "../../types";
 
@@ -13,15 +14,16 @@ const ProfileTop = ({
 }: {
   profile: ProfileType;
 }) => {
+  console.log(avatar)
   return (
-    <div className="profile-top bg-primary p-2">
+    <>
       <img className="round-img my-1" src={avatar} alt="" />
-      <h1 className="large">{name}</h1>
-      <p className="lead">
+      <Typography variant="h1">{name}</Typography>
+      <Typography>
         {status} {company ? <span> at {company}</span> : null}
-      </p>
-      <p>{location ? <span>{location}</span> : null}</p>
-      <div className="icons my-1">
+      </Typography>
+      <Typography>{location ? <span>{location}</span> : null}</Typography>
+      <Box>
         {website ? (
           <a href={website} target="_blank" rel="noopener noreferrer">
             <i className="fas fa-globe fa-2x" />
@@ -41,8 +43,8 @@ const ProfileTop = ({
                 </a>
               ))
           : null}
-      </div>
-    </div>
+      </Box>
+    </>
   );
 };