Maakaf · Darkmift · May 18, 2024 · May 17, 2024 · May 17, 2024 · May 17, 2024
diff --git 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 (
-    <div>
-      <Leaderboard leaderboard={data.props.leaderboard} />
-    </div>
+    <section className="grid grid-row-2 grid-cols-1 gap-10   content-center h-full p-10  md:grid-cols-6 md:grid-row-2  ">
+      <div className=" row-start-1 col-start-1    flex flex-col   md:col-start-1 col-end-3">
+        <h3
+          className={`p-5  w-full ${
+            direction === 'rtl' ? 'text-right' : 'text-left'
+          }`}
+        >
+          {t('MonthlyTitle')}{' '}
+        </h3>
+        <Monthly />
+        <h3
+          className={`p-5  w-full ${
+            direction === 'rtl' ? 'text-right' : 'text-left'
+          }`}
+        >
+          {t('WeeklyTitle')}{' '}
+        </h3>
+        <Weekly />
+      </div>
+      <div className="max-h-[90vh] bg-lightAccBg dark:bg-darkBg min-w-[80vw] md:min-w-[50vw] flex flex-col shadow-2xl shadow-discordLight rounded-sm  row-start-2 col-start-1 md:col-start-4 md:col-end-7 md:row-start-1 md:min-h-[100vh] md:p-4 md:relative left-10    ">
+        <h3
+          className={`p-5 w-2/3 self-center ${
+            direction === 'rtl' ? 'text-right' : 'text-left'
+          }`}
+        >
+          {t('AllTimesTitle')}{' '}
+        </h3>
+        <LeaderBoardChart />
+      </div>
+    </section>
   );
 };
 
 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
@@ -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 (
+    <div
+      dir={direction}
+      className="   bg-lightAccBg overflow-y-auto  h-2/3 w-2/3 flex flex-col  gap-6  self-center ring-8 rounded-sm  dark:bg-darkAccBg dark:ring-offset-darkAccBg p-2  "
+    >
+      {leaderBoardData.props.leaderboard.members.reverse().map((contributor, place) => {
+        const pathDevelp = contributor;
+
+        return (
+          <div
+            key={pathDevelp.node_id}
+            className="w-full flex flex-col md:flex-row ring-4 h-fit p-2 rounded-md md:gap-6  "
+          >
+            <div className="flex gap-3 ">
+              <span>#{place + 1}</span>
+              <img
+                className="rounded-full object-cover h-10 w-10"
+                src={pathDevelp.avatar_url}
+                alt=""
+              />
+              <div className="flex flex-col">
+                <a
+                  className="truncate text-xs self-center font-bold underline decoration-blue-400  cursor-pointer w-20"
+                  target="_blank"
+                  href={`https://github.com/${pathDevelp.name}`}
+                >
+                  {pathDevelp.name}
+                </a>
+                <span className="text-gray-500 text-xs self-end justify-start max-md:hidden">
+                  commits: {pathDevelp.stats.commits}
+                </span>
+                <span className="text-gray-500 text-xs self-end justify-start max-md:hidden">
+                  score: {pathDevelp.score}
+                </span>
+              </div>
+            </div>
+            <span className="text-gray-500 text-xs md:hidden">
+               commits: {pathDevelp.stats.commits}
+            </span>
+            <span className="text-green-500 text-xs">
+              {pathDevelp.stats.additions}++
+            </span>
+            <span className="text-red-500 text-xs">
+              {pathDevelp.stats.deletions}--
+            </span>
+          </div>
+        );
+      })}
+    </div>
+  );
+}
diff --git a/components/Leaderboard/Leaderboard.tsx b/components/Leaderboard/Leaderboard.tsx
@@ -101,7 +101,7 @@ export const DisplayPerson: React.FC<PersonPlace> = ({ data, place }) => {
           </div>
         </div>
         <div>
-          <h4 className='text-xs '>Projects:</h4>
+          <h4 className="text-xs ">Projects:</h4>
           {data.projects_names.map((project, ind) => {
             return (
               <a
@@ -164,7 +164,7 @@ export const DisplaySecoundPerson: React.FC<PersonPlace> = ({
           </div>
         </div>
         <div>
-          <h4 className='text-xs '>Projects:</h4>
+          <h4 className="text-xs ">Projects:</h4>
           {data.projects_names.map((project, ind) => {
             return (
               <a
@@ -224,7 +224,7 @@ export const DisplayThirdPerson: React.FC<PersonPlace> = ({ data, place }) => {
           </div>
         </div>
         <div>
-          <h4 className='text-xs '>Projects:</h4>
+          <h4 className="text-xs ">Projects:</h4>
           {data.projects_names.map((project, ind) => {
             return (
               <a
@@ -286,7 +286,7 @@ export const FirstPlacePerson: React.FC<PersonPlace> = ({ data, place }) => {
           </div>
         </div>
         <div>
-          <h4 className='text-xs '>Projects:</h4>
+          <h4 className="text-xs ">Projects:</h4>
           {data.projects_names.map((project, ind) => {
             return (
               <a

diff --git a/components/Leaderboard/Monthly.tsx b/components/Leaderboard/Monthly.tsx
@@ -0,0 +1,79 @@
+import { getData } from '@/app/[locale]/leaderboard/getData';
+import useTextDirection from '@/hooks/useTextDirection';
+import { useTranslations } from 'next-intl';
+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();
+  const t=useTranslations("LeaderBoard.card")
+
+
+  return (
+    <div
+      dir={direction}
+      className="bg-lightAccBg min-h-[50dvh] ring-8 rounded-sm shadow-2xl dark:bg-darkAccBg dark:ring-offset-darkAccBg p-5 hover:shadow-discordLight "
+    >
+      <div className="flex justify-between">
+        <div className="flex flex-col gap-3 md:gap-6 ">
+          <span>{t("name")}:
+            <a
+              className='underline cursor-pointer'
+              target='_blank'
+
+              href={`https://github.com/${Monthly.name}`}>{Monthly.name}</a></span>
+          <span>
+            {t('Addition')}:
+            <span className="text-green-500"> {Monthly.stats.additions}</span>
+          </span>
+          <span>
+            {t('deletions')}:
+            <span className="text-red-500"> {Monthly.stats.deletions}</span>
+          </span>
+          <span>  {t('score')}: {Monthly.score}</span>
+        </div>
+        <img
+          className="object-cover h-20 w-20 rounded-full"
+          src={Monthly.avatar_url}
+          alt="opps"
+        />
+      </div>
+      <h4 className="m-10">  {t('Projects')}</h4>
+      <div className="flex flex-wrap  gap-3">
+        {Monthly.projects_names.map((project, index) => {
+          return (
+            <div className='flex gap-2' key={index}>
+
+              <img className='object-contain h-8' src="https://www.svgrepo.com/show/327284/git-network.svg" alt="" />
+            <a
+
+              target="_blank"
+              href={`https://github.com/${project.url}`}
+            >
+              {project.name}
+            </a>
+
+            </div>
+
+          );
+        })}
+      </div>
+    </div>
+  );
+}
+
+// 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
@@ -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 (
+    <div
+      className="bg-lightAccBg max-h-[40dvh] ring-8 rounded-sm  dark:bg-darkAccBg dark:ring-offset-darkAccBg p-5 shadow-2xl hover:shadow-discordLight "
+      dir={direction}
+    >
+      <div className="flex justify-between">
+        <div className="flex flex-col gap-4 ">
+          <span>{t("card.name")}: 
+            <a
+              className='underline cursor-pointer'
+              target='_blank'
+
+              href={`https://github.com/${Weekly.name}`}> {Weekly.name}</a>
+          </span>
+
+
+          <span>
+            {t("card.Addition")}:
+            <span className="text-green-500"> {Weekly.stats.additions}</span>
+          </span>
+          <span>
+            {t('card.deletions')}:
+            <span className="text-red-500"> {Weekly.stats.deletions}</span>
+          </span>
+          <span>{t("card.commits")}: {Weekly.stats.commits}</span>
+          <span>{t("card.score")}: {Weekly.score}</span>
+        </div>
+
+        <img
+          className="object-cover h-20 w-20 rounded-full"
+          src={Weekly.avatar_url}
+          alt=""
+        />
+      </div>
+    </div>
+  );
+}
diff --git a/components/Leaderboard/type.ts b/components/Leaderboard/type.ts
@@ -0,0 +1,37 @@
+export type Welcome = {
+  data: Data;
+};
+
+export type Data = {
+  data?: Array<Array<DatumClass | string>>;
+  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
@@ -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
@@ -145,6 +145,12 @@
     "thirdOption": "אופציה שלישית",
     "noMemberFound": "המשתמש לא נמצא"
   },
+  "LeaderBoard": {
+    "MonthlyTitle": "מצטיין חודשי",
+    "WeeklyTitle": "מצטיין שבועי",
+    "AllTimesTitle": "כל הזמנים",
+    "card":{"name":"שם","Addition":"הוספה","deletions":"מחיקה","score":"ציון","Projects":"פרוייקטים","commits":"קומיטים"}
+  },
   "Components": {
     "home": {
       "quotes": {