diff --git a/app/[locale]/leaderboard/page.tsx b/app/[locale]/leaderboard/page.tsx index 18c87ac..393d1ea 100644 --- a/app/[locale]/leaderboard/page.tsx +++ b/app/[locale]/leaderboard/page.tsx @@ -1,6 +1,11 @@ import { Metadata } from 'next'; +import { use } from 'react'; import { getData } from './getData'; -import Leaderboard from '@/components/Leaderboard/Leaderboard'; +import { useTranslations } from 'next-intl'; +import useTextDirection from '@/hooks/useTextDirection'; +import Monthly from '@/components/Leaderboard/Monthly'; +import Weekly from '@/components/Leaderboard/Weekly'; +import LeaderBoardChart from '@/components/Leaderboard/LeaderBoardChart'; export const metadata: Metadata = { title: 'לוח מובילים - Leaderboard', @@ -23,16 +28,55 @@ export const metadata: Metadata = { }, }; -const LeaderboardPage: React.FC = async () => { - const data = await getData(); - - data.props.leaderboard.members.sort((a, b) => b.score - a.score); +const LeaderboardPage: React.FC = () => { + const leaderboard = use(getData()); + const t = useTranslations('LeaderBoard'); + const direction = useTextDirection(); return ( -
- -
+
+
+

+ {t('MonthlyTitle')}{' '} +

+ +

+ {t('WeeklyTitle')}{' '} +

+ +
+
+

+ {t('AllTimesTitle')}{' '} +

+ +
+
); }; export default LeaderboardPage; + +/* +TODO: Create a the page ui for the leaderboard +TODO: Database for the leaderboard +TODO: interface for the leaderboard +TODO: loop through the github users +TODO: +TODO: +TODO: +TODO: +*/ +//add UI translate diff --git a/components/Leaderboard/LeaderBoardChart.tsx b/components/Leaderboard/LeaderBoardChart.tsx new file mode 100644 index 0000000..3c8ca94 --- /dev/null +++ b/components/Leaderboard/LeaderBoardChart.tsx @@ -0,0 +1,60 @@ +import useTextDirection from '@/hooks/useTextDirection'; +import { use } from 'react'; +import { getData } from '@/app/[locale]/leaderboard/getData'; +export default function LeaderBoardChart() { + const leaderBoardData = use(getData()); + + + const direction = useTextDirection(); + + return ( +
+ {leaderBoardData.props.leaderboard.members.reverse().map((contributor, place) => { + const pathDevelp = contributor; + + return ( +
+
+ #{place + 1} + +
+ + {pathDevelp.name} + + + commits: {pathDevelp.stats.commits} + + + score: {pathDevelp.score} + +
+
+ + commits: {pathDevelp.stats.commits} + + + {pathDevelp.stats.additions}++ + + + {pathDevelp.stats.deletions}-- + +
+ ); + })} +
+ ); +} diff --git a/components/Leaderboard/Leaderboard.tsx b/components/Leaderboard/Leaderboard.tsx index 8f10904..f472156 100644 --- a/components/Leaderboard/Leaderboard.tsx +++ b/components/Leaderboard/Leaderboard.tsx @@ -101,7 +101,7 @@ export const DisplayPerson: React.FC = ({ data, place }) => {
-

Projects:

+

Projects:

{data.projects_names.map((project, ind) => { return ( = ({
-

Projects:

+

Projects:

{data.projects_names.map((project, ind) => { return ( = ({ data, place }) => {
-

Projects:

+

Projects:

{data.projects_names.map((project, ind) => { return ( = ({ data, place }) => {
-

Projects:

+

Projects:

{data.projects_names.map((project, ind) => { return ( +
+
+ {t("name")}: + {Monthly.name} + + {t('Addition')}: + {Monthly.stats.additions} + + + {t('deletions')}: + {Monthly.stats.deletions} + + {t('score')}: {Monthly.score} +
+ opps +
+

{t('Projects')}

+
+ {Monthly.projects_names.map((project, index) => { + return ( +
+ + + + {project.name} + + +
+ + ); + })} +
+
+ ); +} + +// Dark Mode Colors +// darkBg: colors.slate[950], +// darkAccBg: colors.slate[800], +// lightText: colors.slate[50], +// discordDark: colors.white, + +// lightBg: colors.slate[100], +// lightAccBg: colors.indigo[100], +// darkText: colors.slate[950], +// discordLight: colors.indigo[400], diff --git a/components/Leaderboard/Weekly.tsx b/components/Leaderboard/Weekly.tsx new file mode 100644 index 0000000..8a820ae --- /dev/null +++ b/components/Leaderboard/Weekly.tsx @@ -0,0 +1,49 @@ +import useTextDirection from '@/hooks/useTextDirection'; +import { use } from 'react'; +import { getData } from '@/app/[locale]/leaderboard/getData'; +import { useTranslations } from 'next-intl'; +export default function Weekly() { + const direction = useTextDirection(); + const t=useTranslations("LeaderBoard") + + const leaderBoardData = use(getData()); + const Weekly = leaderBoardData.props.leaderboard.members[leaderBoardData.props.leaderboard.members.length - 1]; + + + return ( +
+
+
+ {t("card.name")}: + {Weekly.name} + + + + + {t("card.Addition")}: + {Weekly.stats.additions} + + + {t('card.deletions')}: + {Weekly.stats.deletions} + + {t("card.commits")}: {Weekly.stats.commits} + {t("card.score")}: {Weekly.score} +
+ + +
+
+ ); +} diff --git a/components/Leaderboard/type.ts b/components/Leaderboard/type.ts new file mode 100644 index 0000000..5415ce5 --- /dev/null +++ b/components/Leaderboard/type.ts @@ -0,0 +1,37 @@ +export type Welcome = { + data: Data; +}; + +export type Data = { + data?: Array>; + since?: Date; + until?: Date; +}; + +export type DatumClass = { + name?: string; + nodeID?: string; + projectsNames?: ProjectsName[]; + avatarURL?: string; + score?: number; + stats?: Stats; +}; + +export type ProjectsName = { + url?: URL; + name?: Name; +}; + +export enum Name { + MaakafWebsite = 'maakaf-website', +} + +export enum URL { + MaakafMaakafWebsite = 'maakaf/maakaf-website', +} + +export type Stats = { + additions?: number; + deletions?: number; + commits?: number; +}; diff --git a/public/locales/en.json b/public/locales/en.json index 9bae24b..ca6bd9a 100644 --- a/public/locales/en.json +++ b/public/locales/en.json @@ -132,6 +132,12 @@ "thirdOption": "Third option", "noMemberFound": "No Member found" }, + "LeaderBoard": { + "MonthlyTitle": "Monthly Score", + "WeeklyTitle": "Weekly Score", + "AllTimesTitle": "All Times Score", + "card":{"name":"Name","Addition":"Addition","deletions":"Deletions","score":"score","Projects":"Projects","commits":"commits"} + }, "Components": { "home": { "quotes": { diff --git a/public/locales/he.json b/public/locales/he.json index a6bd4ba..1f6bfae 100644 --- a/public/locales/he.json +++ b/public/locales/he.json @@ -145,6 +145,12 @@ "thirdOption": "אופציה שלישית", "noMemberFound": "המשתמש לא נמצא" }, + "LeaderBoard": { + "MonthlyTitle": "מצטיין חודשי", + "WeeklyTitle": "מצטיין שבועי", + "AllTimesTitle": "כל הזמנים", + "card":{"name":"שם","Addition":"הוספה","deletions":"מחיקה","score":"ציון","Projects":"פרוייקטים","commits":"קומיטים"} + }, "Components": { "home": { "quotes": {