diff --git a/app/[locale]/leaderboard/page.tsx b/app/[locale]/leaderboard/page.tsx index 18c87ac..23c3a54 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 LeaderBoardChart from '@/components/LeaderBoard/LeaderBoardChart' +import Monthly from '@/components/LeaderBoard/Monthly' +import Weekly from '@/components/LeaderBoard/Weekly' import { getData } from './getData'; -import Leaderboard from '@/components/Leaderboard/Leaderboard'; +import { useTranslations } from 'next-intl'; +import useTextDirection from '@/hooks/useTextDirection'; export const metadata: Metadata = { title: 'לוח מובילים - Leaderboard', @@ -23,16 +28,41 @@ export const metadata: Metadata = { }, }; -const LeaderboardPage: React.FC = async () => { - const data = await getData(); +const LeaderboardPage: React.FC = () => { + const leaderboard = use(getData()); + const t=useTranslations("LeaderBoard") + const direction=useTextDirection() + + + - data.props.leaderboard.members.sort((a, b) => b.score - a.score); 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..3dd1c0f --- /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.map((contributor, place) => { + const pathDevelp = contributor + + return ( +
+
+ #{place + 1} + +
+ + {pathDevelp.name} + + + {pathDevelp.stats.commits} commits + + + score:{pathDevelp.score}{' '} + +
+
+ + {pathDevelp.stats.commits} commits + + + {pathDevelp.stats.additions}++ + + + {pathDevelp.stats.deletions}-- + +
+ ); + })} +
+ ); +} diff --git a/components/Leaderboard/Monthly.tsx b/components/Leaderboard/Monthly.tsx new file mode 100644 index 0000000..49fa37c --- /dev/null +++ b/components/Leaderboard/Monthly.tsx @@ -0,0 +1,64 @@ +import { getData } from '@/app/[locale]/leaderboard/getData'; +import useTextDirection from '@/hooks/useTextDirection'; +import React from 'react'; +import { use } from 'react'; +export default function Monthly() { + const leaderBoardData = use(getData()); + + + const Monthly = leaderBoardData.props.leaderboard.members[leaderBoardData.props.leaderboard.members.length - 1]; + const direction = useTextDirection(); + + + return ( +
+
+
+ name:{Monthly.name} + + additions: + {Monthly.stats.additions} + + + deletions: + {Monthly.stats.deletions} + + score:{Monthly.score} +
+ opps +
+

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..86c08a7 --- /dev/null +++ b/components/Leaderboard/Weekly.tsx @@ -0,0 +1,38 @@ +import useTextDirection from '@/hooks/useTextDirection'; +import { use } from 'react'; +import { getData } from '@/app/[locale]/leaderboard/getData'; +export default function Weekly() { + const direction = useTextDirection(); + const leaderBoardData = use(getData()); + const Weekly = leaderBoardData.props.leaderboard.members[leaderBoardData.props.leaderboard.members.length-1]; + console.log(leaderBoardData.props.leaderboard); + + return ( +
+
+
+ name:{Weekly.name} + + + additions: + {Weekly.stats.additions} + + + deletions:{' '} + {Weekly.stats.deletions} + + commits:{Weekly.stats.commits} + 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..adee727 100644 --- a/public/locales/en.json +++ b/public/locales/en.json @@ -132,6 +132,11 @@ "thirdOption": "Third option", "noMemberFound": "No Member found" }, + "LeaderBoard":{ + "MonthlyTitle":"Monthly Score", + "WeeklyTitle":"Weekly Score", + "AllTimesTitle":"All Times Score" + }, "Components": { "home": { "quotes": { diff --git a/public/locales/he.json b/public/locales/he.json index a6bd4ba..74ca555 100644 --- a/public/locales/he.json +++ b/public/locales/he.json @@ -145,6 +145,11 @@ "thirdOption": "אופציה שלישית", "noMemberFound": "המשתמש לא נמצא" }, + "LeaderBoard": { + "MonthlyTitle": "מצטיין חודשי", + "WeeklyTitle": "מצטיין שבועי", + "AllTimesTitle": "כל הזמנים" + }, "Components": { "home": { "quotes": {