event page WIP

kudos-ink · Sep 29, 2024 · 4369058 · 4369058
1 parent 4b401b9
commit 4369058
Show file tree

Hide file tree

Showing 12 changed files with 458 additions and 10 deletions.
diff --git a/app/events/kudos-weeks/_components/EventBanner.tsx b/app/events/kudos-weeks/_components/EventBanner.tsx
@@ -0,0 +1,56 @@
+import NextImage from "next/image";
+import { IconRepo, IconSocial, IconWeb } from "@/assets/icons";
+
+const EventBanner = () => (
+  <article className="rounded-xl p-6 bg-container-1 border-container-stroke-separator relative overflow-hidden h-[675px]">
+    <NextImage
+      className="pointer-events-none absolute -left-[5px] -top-[30px] h-[calc(100%_+_60px)] w-[calc(100%_+_10px)] max-w-[initial] object-cover object-top"
+      src="/images/kudos-weeks.png"
+      alt="Event banner"
+      height={983}
+      width={1200}
+    />
+    <div className="relative flex flex-col gap-6 w-6/12">
+      <div className="flex flex-col gap-1">
+        <span className="text-xl text-primary italic">
+          {"kudos < > PBA host"}
+        </span>
+        <span className="tracking-tight text-6xl font-bold">Kudos Weeks</span>
+        <span className="text-xl text-default-600">
+          November 1, 2024 - December 15, 2024
+        </span>
+      </div>
+
+      <div className="gap-3 flex flex-col sm:flex-row mt-8">
+        <div className="flex min-w-40 flex-col gap-2 rounded-xl bg-default text-default-foreground p-3">
+          <div className="flex items-center gap-1">
+            <span className="text-xs font-medium text-text-1 flex items-center gap-2">
+              <IconSocial size={16} /> Participants
+            </span>
+          </div>
+          <span className="text-2xl font-bold text-text-1">221</span>
+        </div>
+        <div className="flex min-w-40 flex-col gap-2 rounded-xl bg-default text-default-foreground p-3">
+          <div className="flex items-center gap-1">
+            <span className="text-xs font-medium text-text-1 flex items-center gap-2">
+              <IconRepo size={16} /> Issues to challenge
+            </span>
+          </div>
+          <span className="text-2xl font-bold text-text-1">
+            87 <span className="text-default-600 font-medium">/ 134</span>
+          </span>
+        </div>
+        <div className="flex min-w-40 flex-col gap-2 rounded-xl bg-default text-default-foreground p-3">
+          <div className="flex items-center gap-1">
+            <span className="text-xs font-medium text-text-1 flex items-center gap-2">
+              <IconWeb size={16} /> Projects
+            </span>
+          </div>
+          <span className="text-2xl font-bold text-text-1">17</span>
+        </div>
+      </div>
+    </div>
+  </article>
+);
+
+export default EventBanner;
diff --git a/app/events/kudos-weeks/page.tsx b/app/events/kudos-weeks/page.tsx
@@ -0,0 +1,226 @@
+import { Button } from "@nextui-org/button";
+import { Link } from "@nextui-org/link";
+import { IconSocial, IconWeb } from "@/assets/icons";
+import IssuesApi from "@/api/core/issues";
+import LeaderboardTable from "@/components/leaderboard/table";
+import { container } from "@/components/primitives";
+import PaginatedTable from "@/components/table/paginated-table";
+import { DEFAULT_PAGINATED_RESPONSE, DEFAULT_QUERY } from "@/data/fetch";
+import { Issue, IssueQueryParams } from "@/types/issue";
+import { Leaderboard } from "@/types/leaderboard";
+import { PaginatedCustomResponse } from "@/types/pagination";
+import EventBanner from "./_components/EventBanner";
+
+const MOCKED_WEEKLY_LEADERBOARD: Leaderboard[] = [
+  {
+    avatar: "https://avatars.githubusercontent.com/u/10196091?v=4",
+    name: "Ankan",
+    username: "Ank4n",
+    score: 11,
+  },
+  {
+    avatar: "https://avatars.githubusercontent.com/u/1728078?v=4",
+    name: "Michal Kucharczyk",
+    username: "michalkucharczyk",
+    score: 9,
+  },
+  {
+    avatar: "https://avatars.githubusercontent.com/u/37149322?v=4",
+    name: "Facundo Farall",
+    username: "ffarall",
+    score: 7,
+  },
+  {
+    avatar: "https://avatars.githubusercontent.com/u/4390772?v=4",
+    name: "Francisco Aguirre",
+    username: "franciscoaguirre",
+    score: 7,
+  },
+  {
+    avatar: "https://avatars.githubusercontent.com/u/48095175?v=4",
+    username: "CJ13th",
+    score: 7,
+  },
+  {
+    avatar: "https://avatars.githubusercontent.com/u/5718007?v=4",
+    name: "Bastian Köcher",
+    username: "bkchr",
+    score: 5,
+  },
+  {
+    avatar: "https://avatars.githubusercontent.com/u/85124277?v=4",
+    name: "Benjamin Salon",
+    username: "benjaminsalon",
+    score: 4,
+  },
+  {
+    avatar: "https://avatars.githubusercontent.com/u/26460174?v=4",
+    name: "Igor Papandinas",
+    username: "ipapandinas",
+    score: 2,
+  },
+  {
+    avatar: "https://avatars.githubusercontent.com/u/22482966?v=4",
+    username: "leapalazzolo",
+    score: 2,
+  },
+  {
+    avatar: "https://avatars.githubusercontent.com/u/2580396?v=4",
+    name: "Alexander Theißen",
+    username: "athei",
+    score: 1,
+  },
+].map((item, idx) => ({ id: idx + 1, ...item }));
+
+const MOCKED_TOTAL_LEADERBOARD: Leaderboard[] = [
+  {
+    avatar: "https://avatars.githubusercontent.com/u/48095175?v=4",
+    username: "CJ13th",
+    score: 34,
+  },
+  {
+    avatar: "https://avatars.githubusercontent.com/u/4390772?v=4",
+    name: "Francisco Aguirre",
+    username: "franciscoaguirre",
+    score: 27,
+  },
+  {
+    avatar: "https://avatars.githubusercontent.com/u/10196091?v=4",
+    name: "Ankan",
+    username: "Ank4n",
+    score: 21,
+  },
+  {
+    avatar: "https://avatars.githubusercontent.com/u/1728078?v=4",
+    name: "Michal Kucharczyk",
+    username: "michalkucharczyk",
+    score: 20,
+  },
+  {
+    avatar: "https://avatars.githubusercontent.com/u/22482966?v=4",
+    username: "leapalazzolo",
+    score: 18,
+  },
+  {
+    avatar: "https://avatars.githubusercontent.com/u/37149322?v=4",
+    name: "Facundo Farall",
+    username: "ffarall",
+    score: 15,
+  },
+  {
+    avatar: "https://avatars.githubusercontent.com/u/26460174?v=4",
+    name: "Igor Papandinas",
+    username: "ipapandinas",
+    score: 13,
+  },
+  {
+    avatar: "https://avatars.githubusercontent.com/u/5718007?v=4",
+    name: "Bastian Köcher",
+    username: "bkchr",
+    score: 8,
+  },
+  {
+    avatar: "https://avatars.githubusercontent.com/u/2580396?v=4",
+    name: "Alexander Theißen",
+    username: "athei",
+    score: 7,
+  },
+  {
+    avatar: "https://avatars.githubusercontent.com/u/85124277?v=4",
+    name: "Benjamin Salon",
+    username: "benjaminsalon",
+    score: 4,
+  },
+].map((item, idx) => ({ id: idx + 1, ...item }));
+
+export default async function SingleEventPage() {
+  const query: IssueQueryParams = {
+    // TODO: Event filters
+  };
+  const issues = (await IssuesApi.getIssues({
+    ...DEFAULT_QUERY,
+    ...query,
+  }).catch((error) => {
+    console.error(`Error fetching Kudos Weeks issues:`, error);
+    return DEFAULT_PAGINATED_RESPONSE;
+  })) as PaginatedCustomResponse<Issue>;
+
+  return (
+    <>
+      <section className={container()}>
+        <EventBanner />
+      </section>
+      <section className={container() + " mt-16"}>
+        <h2 id="guidelines" className="text-foreground text-5xl font-bentoga">
+          Guidelines
+        </h2>
+        <div className="flex flex-wrap gap-3 mt-6">
+          <Button
+            size="sm"
+            aria-label="telegram group"
+            color="default"
+            variant="faded"
+            className="capitalize"
+            startContent={<IconSocial size={16} />}
+          >
+            <p className="text-sm">Telegram group</p>
+          </Button>
+          <Button
+            size="sm"
+            aria-label="telegram group"
+            color="default"
+            variant="faded"
+            className="capitalize"
+            startContent={<IconWeb size={16} />}
+          >
+            <p className="text-sm">Blog post</p>
+          </Button>
+        </div>
+        <div className="flex flex-col gap-4 mt-6">
+          <p>
+            Kudos Weeks is a 6-week event exclusively for PBA Alumni, aimed at
+            boosting Alumni contributions to the Polkadot ecosystem.
+            Participants will choose from a curated list of open issues provided
+            by the Kudos team and ecosystem partners.
+          </p>
+          <p>
+            Each issue completed during the event window (November 1st to
+            December 15th) will earn contributors one point on the event{" "}
+            <Link
+              href="#leaderboard"
+              aria-label="Kudos Week Leaderboard"
+              title="Kudos Week Leaderboard"
+            >
+              <strong className="text-primary">leaderboard</strong>
+            </Link>
+            . The list of available issues can be found in the backlog below,
+            and points are awarded for issues assigned and closed within the
+            event timeframe.
+          </p>
+          <p className="uppercase tracking-wide font-semibold">
+            Get involved, contribute, and showcase your impact on the ecosystem!
+          </p>
+        </div>
+      </section>
+      <section className={container() + " mt-16"}>
+        <div className="py-4 px-3 bg-default-100 border-small rounded-t-md">
+          <span className="text-lg font-bold">Kudos Weeks Issues Backlog</span>
+        </div>
+        <PaginatedTable
+          initialItems={issues}
+          query={query}
+          pagination={DEFAULT_QUERY}
+        />
+      </section>
+      <section className={container() + " mt-16"}>
+        <h2 id="leaderboard" className="text-foreground text-5xl font-bentoga">
+          Leaderboard
+        </h2>
+        <div className="flex flex-col gap-4 sm:flex-row mt-6">
+          <LeaderboardTable data={MOCKED_WEEKLY_LEADERBOARD} />
+          <LeaderboardTable data={MOCKED_TOTAL_LEADERBOARD} />
+        </div>
+      </section>
+    </>
+  );
+}
diff --git a/app/projects/[slug]/_components/ProjectHeader.tsx b/app/projects/[slug]/_components/ProjectHeader.tsx
@@ -21,12 +21,16 @@ const ProjectHeader = ({
     <div className="flex gap-4 items-center mb-2">
       {avatar && (
         <MyImage
-          className="bg-foreground border"
-          src={avatar}
+          className="bg-foreground border min-w-[45px] min-h-[45px] shrink-0 flex items-center justify-center"
+          src={
+            name.toLocaleLowerCase() == "polkadot"
+              ? "/images/polkadot-logo.png"
+              : avatar
+          }
           alt={`${name}'s Logo`}
           radius="sm"
-          height={45}
-          width={45}
+          height={40}
+          width={40}
         />
       )}
       <span className="text-3xl font-semibold">{name}</span>

diff --git a/app/projects/[slug]/page.tsx b/app/projects/[slug]/page.tsx
@@ -82,6 +82,7 @@ export default async function SingleProjectPage({ params }: IProps) {
           initialItems={issues}
           query={query}
           pagination={DEFAULT_QUERY}
+          withProjectData={false}
         />
       </section>
     </>

diff --git a/components/leaderboard/row.tsx b/components/leaderboard/row.tsx
@@ -0,0 +1,51 @@
+import NextImage from "next/image";
+
+interface IContributorProps {
+  avatarSrc: string | null;
+  username: string;
+  name?: string;
+}
+export const Contributor = ({
+  avatarSrc,
+  username,
+  name,
+}: IContributorProps) => {
+  return (
+    <div className="flex md:gap-4" color="foreground">
+      <Contributor.Avatar alt={`${username} avatar`} src={avatarSrc} />
+      <div className="flex flex-col justify-center items-start w-36">
+        <h2 className="w-fit text-base font-semibold leading-none truncate">
+          {name ?? username}
+        </h2>
+        {name && (
+          <p className="w-fit text-small text-default-500 truncate">
+            {username}
+          </p>
+        )}
+      </div>
+    </div>
+  );
+};
+
+interface IAvatarProps {
+  alt: string;
+  src: string | null;
+}
+
+const Avatar = ({ alt, src }: IAvatarProps) => {
+  return (
+    <div className="relative border bg-foreground overflow-hidden rounded-full min-w-[45px] min-h-[45px] shrink-0 flex items-center justify-center">
+      {src !== null && (
+        <NextImage
+          className="pointer-events-none absolute -left-0 -top-0 h-[45px] w-[45px] max-w-[initial] transition-opacity z-10 opacity-100 object-cover object-center"
+          src={src}
+          alt={alt}
+          height={40}
+          width={40}
+        />
+      )}
+    </div>
+  );
+};
+
+Contributor.Avatar = Avatar;