161-feature-donors-page-and-leaderboard

src/common/ui/layout/svg/Trophy.tsx

@@ -0,0 +1,14 @@
+// TODO!: Delete this file and use an icon library package component instead!
+
+const Trophy = (props: any) => {
+  return (
+    <svg {...props} viewBox="0 0 19 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M4.66797 18V16H8.66797V12.9C7.8513 12.7167 7.12214 12.3708 6.48047 11.8625C5.8388 11.3542 5.36797 10.7167 5.06797 9.95C3.81797 9.8 2.77214 9.25417 1.93047 8.3125C1.0888 7.37083 0.667969 6.26667 0.667969 5V4C0.667969 3.45 0.863802 2.97917 1.25547 2.5875C1.64714 2.19583 2.11797 2 2.66797 2H4.66797V0H14.668V2H16.668C17.218 2 17.6888 2.19583 18.0805 2.5875C18.4721 2.97917 18.668 3.45 18.668 4V5C18.668 6.26667 18.2471 7.37083 17.4055 8.3125C16.5638 9.25417 15.518 9.8 14.268 9.95C13.968 10.7167 13.4971 11.3542 12.8555 11.8625C12.2138 12.3708 11.4846 12.7167 10.668 12.9V16H14.668V18H4.66797ZM4.66797 7.8V4H2.66797V5C2.66797 5.63333 2.8513 6.20417 3.21797 6.7125C3.58464 7.22083 4.06797 7.58333 4.66797 7.8ZM14.668 7.8C15.268 7.58333 15.7513 7.22083 16.118 6.7125C16.4846 6.20417 16.668 5.63333 16.668 5V4H14.668V7.8Z"
+        fill={props.fill || "#91321B`"}
+      />
+    </svg>
+  );
+};
+
+export default Trophy;

src/features/donation/components/DonationLeaderboardEntry.tsx

@@ -0,0 +1,57 @@
+import Image from "next/image";
+
+import Trophy from "@/common/ui/layout/svg/Trophy";
+
+export type DonationLeaderboardEntryProps = {
+  rank: number;
+  image: string;
+  name: string;
+  amount: number;
+  type: "donor" | "sponsor";
+};
+
+export const DonationLeaderboardEntry: React.FC<DonationLeaderboardEntryProps> = ({
+  rank,
+  image,
+  name,
+  amount,
+  type,
+}) => {
+  const bgClass =
+    rank === 1
+      ? "bg-gradient-to-r from-orange-400 to-red-500 text-white"
+      : rank === 2
+        ? "bg-gradient-to-r from-#F7F7F7 to-#DBDBDB"
+        : "bg-gradient-to-r from-#FCE9D5 to-#F8D3B0";
+
+  const rankText = ["1st", "2nd", "3rd"][rank - 1];
+
+  const iconClass = rank === 1 ? "fill-yellow-400" : rank === 2 ? "fill-gray-400" : "fill-red-800";
+
+  return (
+    <div className={`w-288px overflow-hidden rounded-2xl border border-gray-200 pb-4`}>
+      <div className={`flex items-center justify-between p-4 ${bgClass}`}>
+        <div>
+          <Trophy className={`h-6 w-6 ${iconClass}`} />
+        </div>
+        <span className="text-lg font-bold">{rankText}</span>
+      </div>
+      <div className="p-20px flex flex-col items-center">
+        <Image
+          src={image ?? ""}
+          alt={name}
+          className="mb-12px h-20 w-20 rounded-full"
+          width={80}
+          height={80}
+        />
+        <p className="font-500 text-#292929 font-14px mb-2 text-center">{name}</p>
+        <p className="font-600 text-center text-2xl">
+          {amount}{" "}
+          <span className="text-#292929 font-600 text-sm">
+            NEAR {type === "donor" ? "Donated" : "Sponsored"}
+          </span>
+        </p>
+      </div>
+    </div>
+  );
+};

src/features/donation/index.ts

@@ -1,4 +1,5 @@
 export * from "./constants";
+export * from "./components/DonationLeaderboardEntry";
 export * from "./components/summary";
 export * from "./components/human-verification-alert";
 export * from "./components/user-entrypoints";

src/layout/components/app-bar.tsx

@@ -24,7 +24,7 @@ const links = [
   },
 
   { label: "Feed", url: rootPathnames.FEED, disabled: false },
-  // { label: "Donors", url: rootPathnames.DONORS, disabled: false },
+  { label: "Donors", url: rootPathnames.DONORS, disabled: false },
 
   {
     label: "Lists",