fix: add random backgraund color

digitable-lol · Sep 2, 2024 · a103c79 · a103c79
1 parent d66c3b2
commit a103c79
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 5 deletions.
diff --git a/application/frontend/src/components/ProfileCard/ProfileCard.styled.ts b/application/frontend/src/components/ProfileCard/ProfileCard.styled.ts
@@ -14,12 +14,18 @@ export const ProfileCardContainer = styled(Card)({
   },
 })
 
-export const Avatar = styled("img")({
+export const Avatar = styled("div")<{ color: string }>(({ color }) => ({
   width: "50px",
   height: "50px",
   borderRadius: "50%",
   marginRight: "16px",
-})
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  backgroundColor: color,
+  fontSize: "20px",
+  color: "#fff",
+}))
 
 export const ProfileName = styled("div")({
   flexGrow: 1,

diff --git a/application/frontend/src/components/ProfileCard/ProfileCard.tsx b/application/frontend/src/components/ProfileCard/ProfileCard.tsx
@@ -1,22 +1,53 @@
 import React from "react"
 
 import ArrowForwardIcon from "@mui/icons-material/ArrowForward"
+import { Box } from "@mui/material"
 
 import { ArrowIcon, Avatar, ProfileCardContainer, ProfileName } from "./ProfileCard.styled"
 
+const getRandomColor = () => {
+  const colors = [
+    "rgba(0, 145, 255, 1)",
+    "rgba(0, 100, 200, 1)",
+    "rgba(255, 140, 0, 1)",
+    "rgba(200, 150, 255, 1)",
+    "rgba(0, 200, 125, 1)",
+    "rgba(200, 200, 200, 1)",
+    "rgba(255, 255, 180, 1)",
+    "rgba(255, 180, 180, 1)",
+  ]
+  return colors[Math.floor(Math.random() * colors.length)]
+}
+
 interface ProfileCardProps {
   profile: {
     id: number
     name: string
-    avatar: string
+    avatar?: string
   }
 }
 
 export const ProfileCard: React.FC<ProfileCardProps> = ({ profile }) => {
+  const { name, avatar } = profile
+  const avatarLetter = name.charAt(0).toUpperCase()
+  const avatarColor = getRandomColor()
+
   return (
     <ProfileCardContainer>
-      <Avatar src={profile.avatar} alt={profile.name} />
-      <ProfileName>{profile.name}</ProfileName>
+      <Avatar color={avatar ? undefined : avatarColor}>
+        {avatar ? (
+          <img
+            src={avatar}
+            alt={name}
+            style={{ width: "100%", height: "100%", borderRadius: "50%" }}
+          />
+        ) : (
+          avatarLetter
+        )}
+      </Avatar>
+      <Box>
+        <ProfileName>{name}</ProfileName>
+      </Box>
       <ArrowIcon>
         <ArrowForwardIcon />
       </ArrowIcon>