add lightmode darkmode and traslation

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 (
-    <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 

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.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=""
+                >
+                  {pathDevelp.name}
+                </a>
+                <span className="text-gray-500 text-xs self-end justify-start max-md:hidden">
+                  {pathDevelp.stats.commits} 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">
+              {pathDevelp.stats.commits} 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>
+  );
+}

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 (
+    <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>name:{Monthly.name}</span>
+          <span>
+            additions:
+            <span className="text-green-500">{Monthly.stats.additions}</span>
+          </span>
+          <span>
+            deletions:
+            <span className="text-red-500">{Monthly.stats.deletions}</span>
+          </span>
+          <span>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">projects</h4>
+      <div className="flex flex-wrap  gap-3">
+        {Monthly.projects_names.map((project, index) => {
+          return (
+            <a
+              key={index}
+              target="_blank"
+              href={`https://github.com/${project.url}`}
+            >
+              {project.name}
+            </a>
+          );
+        })}
+      </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],

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 (
+    <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>name:{Weekly.name}</span>
+
+          <span>
+            additions:
+            <span className="text-green-500">{Weekly.stats.additions}</span>
+          </span>
+          <span>
+            deletions:{' '}
+            <span className="text-red-500">{Weekly.stats.deletions}</span>
+          </span>
+          <span>commits:{Weekly.stats.commits}</span>
+          <span>score:{Weekly.score}</span>
+        </div>
+        <img
+          className="object-cover h-20 w-20 rounded-full"
+          src={Weekly.avatar_url}
+          alt=""
+        />
+      </div>
+    </div>
+  );
+}

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;
+};

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": {

public/locales/he.json

@@ -145,6 +145,11 @@
     "thirdOption": "אופציה שלישית",
     "noMemberFound": "המשתמש לא נמצא"
   },
+  "LeaderBoard": {
+    "MonthlyTitle": "מצטיין חודשי",
+    "WeeklyTitle": "מצטיין שבועי",
+    "AllTimesTitle": "כל הזמנים"
+  },
   "Components": {
     "home": {
       "quotes": {