diff --git a/public/logo.svg b/public/logo.svg index c38206c..b5cbb6c 100644 --- a/public/logo.svg +++ b/public/logo.svg @@ -1,8 +1,8 @@ - - - - - - - - + + + + + + + \ No newline at end of file diff --git a/src/components/leaderboard/AvatarImage.tsx b/src/components/leaderboard/AvatarImage.tsx new file mode 100644 index 0000000..cbcbbe8 --- /dev/null +++ b/src/components/leaderboard/AvatarImage.tsx @@ -0,0 +1,44 @@ +import Image from "next/image" +import { useState } from "react" + +interface AvatarProps { + src?: string + name: string + size?: number + className?: string +} + +export const AvatarWithFallback = ({ + src, + name, + size = 34, + className, +}: AvatarProps) => { + const [error, setError] = useState(false) + const initial = name?.[0]?.toUpperCase() || "?" + const fontSize = size / 2 + + return ( + <> + {!error && src && ( + {`${name}'s setError(true)} + /> + )} +
+ {initial} +
+ + ) +} diff --git a/src/components/leaderboard/LeaderboardMedals.module.css b/src/components/leaderboard/LeaderboardMedals.module.css index 874ed92..9e10d88 100644 --- a/src/components/leaderboard/LeaderboardMedals.module.css +++ b/src/components/leaderboard/LeaderboardMedals.module.css @@ -108,7 +108,7 @@ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; - @apply text-xl font-semibold text-white; + @apply text-lg font-semibold text-white; } .scoreWrapper { diff --git a/src/components/leaderboard/LeaderboardMedals.tsx b/src/components/leaderboard/LeaderboardMedals.tsx index b64ac84..d9b93fd 100644 --- a/src/components/leaderboard/LeaderboardMedals.tsx +++ b/src/components/leaderboard/LeaderboardMedals.tsx @@ -2,6 +2,7 @@ import { FC, useMemo } from "react" import Image from "next/image" import styles from "./LeaderboardMedals.module.css" import { TUser } from "@/types/user" +import { AvatarWithFallback } from "./AvatarImage" const SkeletonMedal: FC<{ position: number }> = ({ position }) => { const isFirstPlace = position === 2 @@ -63,7 +64,7 @@ const LeaderboardMedals: FC<{ users: TUser[]; isLoading: boolean }> = ({ switch (index) { case 1: return styles.gold - case 0: + case 2: return styles.silver default: return styles.bronze @@ -90,16 +91,11 @@ const LeaderboardMedals: FC<{ users: TUser[]; isLoading: boolean }> = ({ className={`${styles.imageBorder} ${getMedalClass(sortedUsers[1]?.rank)}`} > {sortedUsers[1]?.avatarUrl ? ( - { ) : (
= ({ className={`${styles.imageBorder} ${getMedalClass(sortedUsers[0]?.rank)}`} > {sortedUsers[0]?.avatarUrl ? ( - { ) : (
= ({
{sortedUsers?.[2]?.rank}
@@ -205,16 +196,11 @@ const LeaderboardMedals: FC<{ users: TUser[]; isLoading: boolean }> = ({ className={`${styles.imageBorder} ${getMedalClass(sortedUsers[2]?.rank)}`} > {sortedUsers?.[2]?.avatarUrl ? ( - { ) : (
(
@@ -48,11 +49,9 @@ const LeaderboardPartners: FC<{ users: TUser[]; isLoading: boolean }> = ({ const renderUserRow = (user: TUser) => (
- Partner avatar
diff --git a/src/components/nav-element/NavBar.tsx b/src/components/nav-element/NavBar.tsx index 7c99922..5fe781a 100644 --- a/src/components/nav-element/NavBar.tsx +++ b/src/components/nav-element/NavBar.tsx @@ -20,11 +20,11 @@ const NavBar: FC = () => { } return ( -