diff --git a/package.json b/package.json index 3a38dde..235f4d5 100644 --- 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 index c8399b7..149311e 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -14,8 +14,8 @@ dependencies: specifier: 1.9.5 version: 1.9.5(react-redux@8.1.2)(react@18.0.0) '@sliit-foss/bashaway-ui': - specifier: 0.1.10 - version: 0.1.10(@babel/core@7.22.9)(@types/react-dom@18.0.11)(@types/react@18.0.28)(redux@4.2.1)(tailwindcss@3.3.2) + specifier: 0.2.5 + version: 0.2.5(@babel/core@7.22.9)(@types/react-dom@18.0.11)(@types/react@18.0.28)(redux@4.2.1)(tailwindcss@3.3.2) framer-motion: specifier: 10.14.0 version: 10.14.0(react-dom@18.0.0)(react@18.0.0) @@ -566,6 +566,7 @@ packages: /@emotion/memoize@0.7.4: resolution: {integrity: sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==} + requiresBuild: true dev: false optional: true @@ -1458,8 +1459,8 @@ packages: engines: {node: '>=14'} dev: false - /@sliit-foss/bashaway-ui@0.1.10(@babel/core@7.22.9)(@types/react-dom@18.0.11)(@types/react@18.0.28)(redux@4.2.1)(tailwindcss@3.3.2): - resolution: {integrity: sha512-h15aIw9JcfYOb+8dlSK2Pz9RlaJJFpY5fECWpduUBO8RLmn9gFwTVyTufJvu4WYOl6DX9yO+m/dLdcvfTNAweA==} + /@sliit-foss/bashaway-ui@0.2.5(@babel/core@7.22.9)(@types/react-dom@18.0.11)(@types/react@18.0.28)(redux@4.2.1)(tailwindcss@3.3.2): + resolution: {integrity: sha512-9fLQph52g2+3Jp3JLl8Ij66O6WeBs0waJgxT31hiem8DOT5p7ofM6oNOGCiP9VbwzGgjfSOwiK93Xbupp+L0SQ==} dependencies: '@radix-ui/react-alert-dialog': 1.0.4(@types/react-dom@18.0.11)(@types/react@18.0.28)(react-dom@18.0.0)(react@18.0.0) '@radix-ui/react-toast': 1.1.4(@types/react-dom@18.0.11)(@types/react@18.0.28)(react-dom@18.0.0)(react@18.0.0) @@ -3148,6 +3149,7 @@ packages: /loose-envify@1.4.0: resolution: {integrity: sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==} + hasBin: true dependencies: js-tokens: 4.0.0 diff --git a/src/components/home/index.jsx b/src/components/home/index.jsx new file mode 100644 index 0000000..5da6816 --- /dev/null +++ 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 new file mode 100644 index 0000000..860f35b --- /dev/null +++ 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 ( +
+
+
+ {index + 1} +
+
+ {item.name} +
+ + {item.university} +
+
+
+
+ {item.score.toFixed(2)} +
+
+ ); +}; + +export default ScoreCard; diff --git a/src/components/home/score-card/skeleton.jsx b/src/components/home/score-card/skeleton.jsx new file mode 100644 index 0000000..c22b668 --- /dev/null +++ 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) => ( + +
+ +
+ + +
+
+ + + )); +}; + +export default ScoreCardSkeleton; diff --git a/src/components/index.jsx b/src/components/index.jsx index eec9d1e..44e4c6c 100644 --- 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 index 780855d..055c2e6 100644 --- 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" )} > +
+ + The competition + + +
diff --git a/src/pages/home.jsx b/src/pages/home.jsx index bb03b67..4920506 100644 --- 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 ( + <> +
+
+ The Leaderboard + + A place where your true colors showed off despite all the differences + +
+
+ + +
+ } + alternateComponent={ + scores && scores.data.length ? ( + <> + {scores.data.map((item, index) => ( + + ))} + + ) : ( +
+ +
+ ) + } + /> +
+ setPage(newPage)} + totalPages={1} + /> +
+
+ + ); }; export default Home;