Merge pull request #2 from sliit-foss/feature/leaderboard

Feat: added leaderboard components without filtering and sorting
sliit-foss · Sep 4, 2023 · c31487f · c31487f
2 parents f395bec + 702160f
commit c31487f
Show file tree

Hide file tree

Showing 8 changed files with 132 additions and 7 deletions.
diff --git a/package.json b/package.json
@@ -11,7 +11,7 @@
   },
   "dependencies": {
     "@reduxjs/toolkit": "1.9.5",
-    "@sliit-foss/bashaway-ui": "0.1.10",
+    "@sliit-foss/bashaway-ui": "0.2.5",
     "framer-motion": "10.14.0",
     "jwt-decode": "^3.1.2",
     "lodash": "4.17.21",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/components/home/index.jsx b/src/components/home/index.jsx
@@ -0,0 +1 @@
+export * from "./score-card";
diff --git a/src/components/home/score-card/index.jsx b/src/components/home/score-card/index.jsx
@@ -0,0 +1,44 @@
+import { GraduationCap } from "lucide-react";
+import { Body, Body2, Footnote, Title } from "@sliit-foss/bashaway-ui/typography";
+
+const topThreeGradient = (position) => {
+  if (position === 0) return "bg-gradient-to-r from-[#FF107B]/[.12] to-[#F99A2A]/[.12] border-[#ff0000]/10";
+  else if (position === 1) return "bg-gradient-to-r from-[#FF107B]/[.08] to-[#F99A2A]/[.08] border-[#ff0000]/10";
+  else if (position === 2) return "bg-gradient-to-r from-[#FF107B]/[.04] to-[#F99A2A]/[.04] border-[#ff0000]/10";
+  return "";
+};
+
+export { default as ScoreCardSkeleton } from "./skeleton";
+
+export const ScoreCard = ({ item, index, ...props }) => {
+  return (
+    <div
+      className={`flex gap-6 px-6 py-5 rounded-2xl border border-black/10 justify-between items-center ${topThreeGradient(
+        index
+      )}`}
+      {...props}
+    >
+      <div className="flex gap-6 items-center">
+        <div
+          className={`w-16 h-16 rounded-2xl border border-black/10 flex justify-center items-center ${
+            index === 0 || index === 1 || index === 2 ? "bg-gradient-to-tr from-[#f90000] to-[#FF881A] text-white" : ""
+          }`}
+        >
+          <Title className="font-medium">{index + 1}</Title>
+        </div>
+        <div className="flex flex-col gap-1">
+          <Body className="font-inter font-semibold leading-none">{item.name}</Body>
+          <div className="flex gap-[6px] items-center opacity-40">
+            <GraduationCap strokeWidth={1.5} />
+            <Footnote>{item.university}</Footnote>
+          </div>
+        </div>
+      </div>
+      <div className="px-5 py-3 rounded-full border border-black/10 min-w-[116px] bg-white flex justify-center items-center">
+        <Body2>{item.score.toFixed(2)}</Body2>
+      </div>
+    </div>
+  );
+};
+
+export default ScoreCard;
diff --git a/src/components/home/score-card/skeleton.jsx b/src/components/home/score-card/skeleton.jsx
@@ -0,0 +1,18 @@
+import { Skeleton } from "@sliit-foss/bashaway-ui/components";
+
+const ScoreCardSkeleton = () => {
+  return Array.from({ length: 3 }).map((_, i) => (
+    <Skeleton key={i} className="px-6 py-5 rounded-2xl flex w-full justify-between items-center" inline>
+      <div className="flex gap-6 items-center">
+        <Skeleton shade="dark" className="w-[60px] h-[60px] rounded-2xl" inline />
+        <div className="flex flex-col gap-1">
+          <Skeleton shade="dark" className="h-[28px] w-24" inline />
+          <Skeleton shade="dark" className="h-[18px] w-[72px] rounded-2xl" inline />
+        </div>
+      </div>
+      <Skeleton shade="dark" className="px-5 py-3 rounded-full min-w-[116px] h-12" inline />
+    </Skeleton>
+  ));
+};
+
+export default ScoreCardSkeleton;
diff --git a/src/components/index.jsx b/src/components/index.jsx
@@ -1 +1,2 @@
 export * from "./layout";
+export * from "./home";
diff --git a/src/components/layout/header.jsx b/src/components/layout/header.jsx
@@ -6,7 +6,7 @@ import { portalURL } from "@/constants";
 import { useBreakpoint } from "@/hooks";
 import { BashawayLeaderboard } from "@/icons";
 import { AnimatedSwitcher, Button } from "@sliit-foss/bashaway-ui/components";
-import { Bashaway, FOSS, Times } from "@sliit-foss/bashaway-ui/icons";
+import { Bashaway, FOSS, Link as LinkIcon, Times } from "@sliit-foss/bashaway-ui/icons";
 
 const mobileNavIconStyles =
   "block xl:hidden absolute right-8 lg:right-24 h-[1.65rem] w-[1.65rem] cursor-pointer hover:text-black/70 transition-all duration-medium";
@@ -67,6 +67,12 @@ const Header = ({ className }) => {
                 : "opacity-0 pointer-events-none xl:opacity-100 xl:pointer-events-auto"
             )}
           >
+            <div className="group flex gap-1.5 items-center">
+              <a href="https://bashaway.sliitfoss.org" target="_blank" className="link ml-8 xl:ml-0" rel="noreferrer">
+                The competition
+              </a>
+              <LinkIcon className="transform -rotate-45 before:w-[1.2rem] xl:before:w-[0.6rem] before:group-hover:w-[1.45rem] xl:before:group-hover:w-[0.75rem] translate-y-[-0.1rem]" />
+            </div>
             <a href={portalURL}>
               <Button className={buttonStyles}>Back to Portal</Button>
             </a>

diff --git a/src/pages/home.jsx b/src/pages/home.jsx
@@ -1,9 +1,62 @@
+/* eslint-disable no-unused-vars */
+import { useState } from "react";
+import { ScoreCardSkeleton } from "@/components";
+import { ScoreCard } from "@/components/home";
+import { filters as filterData, sorts as sortData } from "@/filters";
 import { useTitle } from "@/hooks";
+import { useFetchLeaderboardQuery } from "@/store/api";
+import { AnimatedSwitcher, Filters, NoRecords, Pagination, Sorts } from "@sliit-foss/bashaway-ui/components";
+import { Footnote, Title } from "@sliit-foss/bashaway-ui/typography";
+import { computeFilterQuery, computeSortQuery } from "@sliit-foss/bashaway-ui/utils";
 
 const Home = () => {
   useTitle("Leaderboard | Bashaway");
+  const [_filters, setFilters] = useState(computeFilterQuery(filterData));
+  const [_sorts, setSorts] = useState(computeSortQuery(sortData));
 
-  return <>Placeholder</>;
+  const { data: scores, isFetching } = useFetchLeaderboardQuery();
+
+  return (
+    <>
+      <div className="w-full flex flex-col justify-center items-center gap-6 mb-8 max-w-4xl">
+        <div className="flex flex-col items-center gap-2 md:gap-1 mb-6 pointer-events-none">
+          <Title className="tracking-normal">The Leaderboard</Title>
+          <Footnote className="text-black/40 max-w-[500px] text-xl lg:text-center leading-6">
+            A place where your true colors showed off despite all the differences
+          </Footnote>
+        </div>
+        <div className="w-full flex justify-center items-center gap-6 mb-8">
+          <Filters filters={filterData} setFilterQuery={setFilters} />
+          <Sorts styles={{ root: "justify-end" }} sorts={sortData} setSortQuery={setSorts} />
+        </div>
+        <AnimatedSwitcher
+          show={isFetching}
+          className={`w-full flex flex-col gap-5`}
+          component={<ScoreCardSkeleton />}
+          alternateComponent={
+            scores && scores.data.length ? (
+              <>
+                {scores.data.map((item, index) => (
+                  <ScoreCard item={item} index={index} key={`score-card-${index}`} />
+                ))}
+              </>
+            ) : (
+              <div className="h-full flex flex-1 items-center">
+                <NoRecords text="No leaders at the moment" />
+              </div>
+            )
+          }
+        />
+        <div className="w-full flex justify-center items-center mt-6 mb-2">
+          <Pagination
+            currentPage={1}
+            // onPageChange={(newPage) => setPage(newPage)}
+            totalPages={1}
+          />
+        </div>
+      </div>
+    </>
+  );
 };
 
 export default Home;