feat: add profile card

application/frontend/src/components/ProfileCard/ProfileCard.styled.ts

@@ -0,0 +1,34 @@
+import { Card } from "@mui/material"
+import { styled } from "@mui/material/styles"
+
+export const ProfileCardContainer = styled(Card)({
+  display: "flex",
+  alignItems: "center",
+  padding: "16px",
+  cursor: "pointer",
+  transition: "0.3s",
+  flexDirection: "row",
+  width: "100%",
+  "&:hover": {
+    boxShadow: "0px 4px 20px rgba(0, 0, 0, 0.1)",
+  },
+})
+
+export const Avatar = styled("img")({
+  width: "50px",
+  height: "50px",
+  borderRadius: "50%",
+  marginRight: "16px",
+})
+
+export const ProfileName = styled("div")({
+  flexGrow: 1,
+  fontSize: "18px",
+  fontWeight: "bold",
+})
+
+export const ArrowIcon = styled("div")({
+  marginLeft: "auto",
+  display: "flex",
+  alignItems: "center",
+})

application/frontend/src/components/ProfileCard/ProfileCard.tsx

@@ -0,0 +1,27 @@
+import React from "react"
+
+import ArrowForwardIcon from "@mui/icons-material/ArrowForward"
+
+import { ArrowIcon, Avatar, ProfileCardContainer, ProfileName } from "./ProfileCard.styled"
+
+interface ProfileCardProps {
+  profile: {
+    id: number
+    name: string
+    avatar: string
+  }
+}
+
+export const ProfileCard: React.FC<ProfileCardProps> = ({ profile }) => {
+  return (
+    <ProfileCardContainer>
+      <Avatar src={profile.avatar} alt={profile.name} />
+      <ProfileName>{profile.name}</ProfileName>
+      <ArrowIcon>
+        <ArrowForwardIcon />
+      </ArrowIcon>
+    </ProfileCardContainer>
+  )
+}
+
+export default ProfileCard

application/frontend/src/components/ProfileCard/index.ts

@@ -0,0 +1 @@
+export { ProfileCard } from "./ProfileCard"