Merge pull request #50 from ai16z/staging

Staging
elizaOS · Dec 4, 2024 · 0bd450a · 0bd450a
2 parents 5fcb9b3 + db3f03a
commit 0bd450a
Show file tree

Hide file tree

Showing 10 changed files with 86 additions and 60 deletions.
diff --git a/public/logo.svg b/public/logo.svg
diff --git a/src/components/leaderboard/AvatarImage.tsx 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 && (
+        <Image
+          width={size}
+          height={size}
+          alt={`${name}'s avatar`}
+          src={src}
+          className={className}
+          onError={() => setError(true)}
+        />
+      )}
+      <div
+        className={`${className} inline-flex grow items-center justify-center rounded-full bg-blue-500 font-medium text-white`}
+        style={{
+          fontSize: `${fontSize}px`,
+          display: !src || error ? "flex" : "none",
+        }}
+      >
+        {initial}
+      </div>
+    </>
+  )
+}
diff --git 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
@@ -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 ? (
-                    <Image
-                      src={sortedUsers[1].avatarUrl}
-                      alt={
-                        sortedUsers[1] && sortedUsers[1].name
-                          ? sortedUsers[1].name
-                          : `Position ${sortedUsers[1]?.rank}`
-                      }
-                      width={80}
-                      height={80}
+                    <AvatarWithFallback
+                      src={sortedUsers[1]?.avatarUrl}
+                      name={sortedUsers[1]?.name}
                       className={styles.userImage}
+                      size={80}
                     />
                   ) : (
                     <div
@@ -150,16 +146,11 @@ const LeaderboardMedals: FC<{ users: TUser[]; isLoading: boolean }> = ({
                   className={`${styles.imageBorder} ${getMedalClass(sortedUsers[0]?.rank)}`}
                 >
                   {sortedUsers[0]?.avatarUrl ? (
-                    <Image
-                      src={sortedUsers?.[0]?.avatarUrl}
-                      alt={
-                        sortedUsers?.[0] && sortedUsers?.[0].name
-                          ? sortedUsers?.[0].name
-                          : `Position ${sortedUsers?.[0]?.rank}`
-                      }
-                      width={120}
-                      height={120}
+                    <AvatarWithFallback
+                      src={sortedUsers[0]?.avatarUrl}
+                      name={sortedUsers[0]?.name}
                       className={styles.userImage}
+                      size={120}
                     />
                   ) : (
                     <div
@@ -197,24 +188,19 @@ const LeaderboardMedals: FC<{ users: TUser[]; isLoading: boolean }> = ({
             <div key={sortedUsers?.[2]?.id} className={styles.medalHolder}>
               <div className={styles.imageWrapper}>
                 <div
-                  className={`${styles.medal} ${getMedalClass(sortedUsers[1]?.rank)}`}
+                  className={`${styles.medal} ${getMedalClass(sortedUsers[2]?.rank)}`}
                 >
                   {sortedUsers?.[2]?.rank}
                 </div>
                 <div
                   className={`${styles.imageBorder} ${getMedalClass(sortedUsers[2]?.rank)}`}
                 >
                   {sortedUsers?.[2]?.avatarUrl ? (
-                    <Image
+                    <AvatarWithFallback
                       src={sortedUsers?.[2]?.avatarUrl}
-                      alt={
-                        sortedUsers?.[2] && sortedUsers?.[2].name
-                          ? sortedUsers?.[2].name
-                          : `Position ${sortedUsers?.[2]?.rank}`
-                      }
-                      width={80}
-                      height={80}
+                      name={sortedUsers?.[2]?.name}
                       className={styles.userImage}
+                      size={80}
                     />
                   ) : (
                     <div

diff --git a/src/components/leaderboard/LeaderboardPartners.tsx b/src/components/leaderboard/LeaderboardPartners.tsx
@@ -3,6 +3,7 @@ import Image from "next/image"
 import styles from "./LeaderboardPartners.module.css"
 import { useMediaQuery } from "react-responsive"
 import { TUser } from "@/types/user"
+import { AvatarWithFallback } from "./AvatarImage"
 
 const SkeletonRow = () => (
   <div className={`${styles.row1} animate-pulse`}>
@@ -48,11 +49,9 @@ const LeaderboardPartners: FC<{ users: TUser[]; isLoading: boolean }> = ({
   const renderUserRow = (user: TUser) => (
     <div key={user.id} className={styles.row1}>
       <div className={styles.rowChild}>
-        <Image
-          width={34}
-          height={34}
-          alt="Partner avatar"
-          src={user.avatarUrl || "/noname.svg"}
+        <AvatarWithFallback
+          src={user.avatarUrl}
+          name={user.name}
           className={styles.avatarImage}
         />
         <div className={styles.textParent}>

diff --git a/src/components/nav-element/NavBar.tsx b/src/components/nav-element/NavBar.tsx
@@ -20,11 +20,11 @@ const NavBar: FC<NavBarProps> = () => {
   }
 
   return (
-    <nav className="sticky top-0 z-[100] h-[66px] w-full px-6 py-3.5">
+    <nav className="sticky top-0 z-[100] h-[66px] w-full bg-black/25 px-6 py-3.5 backdrop-blur-[69px]">
       <div className="flex h-full items-center justify-between">
         {/* Centered Logo */}
         <Link href="https://elizaos.ai/ai16z" className="">
-          <Image src="/logo.svg" alt="Logo" width={50} height={29} priority />
+          <Image src="/logo.svg" alt="Logo" width={55} height={36} priority />
         </Link>
 
         <Link

diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
@@ -27,7 +27,7 @@ const App: FC<AppProps> = ({ Component, pageProps }) => {
   return (
     <SessionProvider session={pageProps.session}>
       <Head>
-        <title>ai16z Partners Lounge</title>
+        <title>ai16z - Marc&apos;s Trust Leaderboard</title>
       </Head>
 
       <Script

diff --git a/src/pages/index.tsx b/src/pages/index.tsx
@@ -1,21 +1,18 @@
 // FILE: src/pages/index.tsx
-import type { NextPage } from "next";
-import Head from "next/head";
-import { HomeView } from "../views/home/index";
+import type { NextPage } from "next"
+import Head from "next/head"
+import { HomeView } from "../views/home/index"
 
 const Home: NextPage = () => {
   return (
     <div>
       <Head>
-        <title>ai16z Partners Lounge</title>
-        <meta
-          name="description"
-          content="ai16z Partners Lounge"
-        />
+        <title>ai16z - Marc&apos;s Trust Leaderboard</title>
+        <meta name="description" content="ai16z - Marc's Trust Leaderboard" />
       </Head>
       <HomeView />
     </div>
-  );
-};
+  )
+}
 
-export default Home;
+export default Home
diff --git a/src/views/home/index.module.css b/src/views/home/index.module.css
@@ -3,7 +3,7 @@
   display: flex;
   flex-direction: column;
   align-items: center;
-  padding: 32px 16px;
+  padding: 48px 16px;
   font-family: var(--font-family-base);
 }
 
@@ -16,10 +16,10 @@
 }
 
 .title {
-  font-family: var(--font-family-title);
+  font-family: var(--font-family-base);
   color: #fff;
   text-align: center;
-  @apply text-5xl leading-[48px] tracking-[4.32px];
+  @apply text-[38px] font-semibold leading-[48px];
 }
 
 .section {

diff --git a/src/views/home/index.tsx b/src/views/home/index.tsx
@@ -23,7 +23,7 @@ export const HomeView: FC = () => {
       <div className={styles.content}>
         <div className="flex flex-col items-center justify-center gap-2 px-4">
           <h2 className={styles.title}>Marc’s Trust Leaderboard</h2>
-          <h3 className="text-center text-xl font-semibold text-white/70">
+          <h3 className="text-center text-lg font-normal text-white/70">
             Limited access to Marc&apos;s Cabal Chat
           </h3>
         </div>