Merge pull request #21 from Programming-Club-Ahmedabad-University/all…

…/leaderboards-carousel

Pushing all the changes i made previously for a fresh start

client/package.json

@@ -17,7 +17,7 @@
     "eslint-config-next": "13.4.16",
     "framer-motion": "^10.16.0",
     "mongodb": "^6.1.0",
-    "next": "13.4.16",
+    "next": "^13.5.4",
     "next-auth": "^4.23.1",
     "react": "18.2.0",
     "react-dom": "18.2.0",

client/pages/Layout.tsx

@@ -1,11 +1,10 @@
 // import "./globals.css";
 
 import type { Metadata } from "next";
-import { Inter } from "next/font/google";
 import styles from "./Layout.module.css";
 import NavBar from "./components/NavBar/NavBar";
 
-const inter = Inter({ subsets: ["latin"] });
+// for the fonts:
 
 export const metadata: Metadata = {
 	title: "Create Next App",

client/pages/_app.tsx

@@ -2,7 +2,7 @@ import { SessionProvider } from "next-auth/react";
 
 import type { AppProps } from "next/app";
 import type { Session } from "next-auth";
-import "./globals.css";
+import "./styles/globals.css";
 
 import { NextUIProvider } from "@nextui-org/react";
 

client/pages/components/ScoreBoard/ScoreBoard.module.css

@@ -0,0 +1,6 @@
+.title {
+  font-size: 1.5rem;
+  font-weight: bold;
+  margin-bottom: 1rem;
+  text-align: center;
+}

client/pages/components/ScoreBoard/ScoreBoard.tsx

@@ -0,0 +1,11 @@
+import style from "./ScoreBoard.module.css";
+
+function ScoreBoard() {
+  return (
+    <div>
+      <h1 className={style.title}>ScoreBoard</h1>
+    </div>
+  );
+}
+
+export default ScoreBoard;

client/pages/components/ScoreBoard/index.tsx

@@ -0,0 +1 @@
+export { default as default } from "./ScoreBoard";

client/pages/components/ScoreCard/ScoreCard.tsx

@@ -0,0 +1,8 @@
+import React from "react";
+import styles from "./ScoreCard.module.css";
+
+function ScoreCard() {
+  return <div>ScoreCard</div>;
+}
+
+export default ScoreCard;

client/pages/components/ScoreCard/index.tsx

@@ -0,0 +1 @@
+export { default as default } from "./ScoreCard";

client/pages/components/SignInButton/SignInButton.tsx

@@ -1,27 +1,16 @@
 "use client";
 
-import { Avatar, Button } from "@nextui-org/react";
+import { Button } from "@nextui-org/react";
 import { signIn, signOut, useSession } from "next-auth/react";
 import React, { useState } from "react";
 import UserCard from "../UserCard/UserCard";
 
+// prop to redirect to the dashboard
+
 function SignInButton() {
   const { data: session } = useSession();
   const [loading, setLoading] = useState(false);
 
-  // if the user does exist:
-  if (session && session.user) {
-    return (
-      <>
-        <UserCard user={session.user} />
-
-        <Button color="primary" onClick={() => signOut()}>
-          Sign out
-        </Button>
-      </>
-    );
-  }
-
   // if the user does not exist:
   return (
     <>
@@ -32,7 +21,9 @@ function SignInButton() {
         color="primary"
         onClick={async () => {
           setLoading(true);
-          await signIn("google");
+          await signIn("google", {
+            callbackUrl: "/dashboard",
+          });
         }}
       >
         {loading ? "Signin In..." : "Sign in with Google"}

client/pages/components/UserCard/UserCard.tsx

@@ -1,11 +1,12 @@
 "use client";
 
 import {
-	Avatar,
-	Card,
-	CardBody,
-	CardFooter,
-	CardHeader,
+  Avatar,
+  Card,
+  CardBody,
+  CardFooter,
+  CardHeader,
+  Button,
 } from "@nextui-org/react";
 import { Session } from "next-auth";
 import React from "react";

client/pages/dashboard.tsx

@@ -0,0 +1,33 @@
+import { useSession } from "next-auth/react";
+import UserCard from "./components/UserCard";
+import style from "./styles/Dashboard.module.css";
+import Layout from "./Layout";
+import ScoreBoard from "./components/ScoreBoard";
+import ScoreCard from "./components/ScoreCard";
+
+export default function Dashboard() {
+  const { data: session } = useSession();
+
+  return (
+    <>
+      <Layout>
+        <div className={style.container}>
+          <h1 className={style.title}>Dashboard</h1>
+
+          <div>
+            <UserCard user={session?.user} />
+          </div>
+
+          {/* leaderboard table here */}
+          <div>
+            <ScoreBoard />
+          </div>
+
+          <div>
+            <ScoreCard />
+          </div>
+        </div>
+      </Layout>
+    </>
+  );
+}

client/pages/index.tsx

@@ -1,5 +1,4 @@
-import styles from "./index.module.css";
-import { Button } from "@nextui-org/button";
+import styles from "./styles/index.module.css";
 import SignInButton from "./components/SignInButton/SignInButton";
 import RootLayout from "./Layout";
 

client/pages/styles/Dashboard.module.css

@@ -0,0 +1,14 @@
+.container {
+  height: 100%;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 1em;
+}
+
+.title {
+  font-size: 2em;
+  font-weight: bold;
+}

client/pages/styles/Layout.module.css

@@ -0,0 +1,5 @@
+.main {
+  display: flex;
+  height: 100%;
+  width: 100%;
+}

client/pages/styles/globals.css

@@ -0,0 +1,24 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@font-face {
+  font-family: "Clash fonts";
+  src: url("/fonts/Clash-Regular.ttf") format("truetype");
+  /* add additional font formats here if needed */
+}
+
+html,
+body,
+#__next {
+  height: 100%;
+  background-color: black;
+  font-family: "Clash fonts", sans-serif; /* use the custom font */
+}
+
+body {
+  user-select: none;
+}
+* {
+  -webkit-tap-highlight-color: transparent;
+}