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

…/leaderboards-carousel

all progress so far and chakra activated!!!

client/package.json

@@ -9,13 +9,16 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "@nextui-org/react": "^2.0.24",
+    "@chakra-ui/next-js": "^2.1.5",
+    "@chakra-ui/react": "^2.8.1",
+    "@emotion/react": "^11.11.1",
+    "@emotion/styled": "^11.11.0",
     "@types/node": "20.5.0",
     "@types/react": "18.2.20",
     "@types/react-dom": "18.2.7",
     "eslint": "8.47.0",
     "eslint-config-next": "13.4.16",
-    "framer-motion": "^10.16.0",
+    "framer-motion": "^10.16.4",
     "mongodb": "^6.1.0",
     "next": "^13.5.4",
     "next-auth": "^4.23.1",
@@ -25,10 +28,5 @@
     "redis": "^4.6.10",
     "swr": "^2.2.2",
     "typescript": "5.1.6"
-  },
-  "devDependencies": {
-    "autoprefixer": "^10.4.15",
-    "postcss": "^8.4.28",
-    "tailwindcss": "^3.3.3"
   }
 }

client/pages/Admin/LeaderboardConfig.module.css

@@ -1,26 +1,40 @@
 .main {
-	display: flex;
-	flex-direction: column;
-	justify-content: space-between;
-	align-items: center;
-	height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: center;
+  height: 100%;
+  gap: 1em;
 }
+
 .addWrapper {
-	display: flex;
-	flex-direction: row;
-	justify-content: space-between;
-	align-items: center;
-	gap: 1em;
-	width: 100%;
-	max-width: 30em;
-	height: max-content;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  gap: 1em;
+  width: 100%;
+  max-width: 30em;
+  height: max-content;
 }
 .addBtn {
-	display: flex;
-	flex: 1;
+  display: flex;
+  flex: 1;
 
-	font-size: 1.5em;
+  font-size: 1.5em;
 }
 .addInput {
-	flex: 10;
+  flex: 10;
+}
+
+.listContent {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: center;
+  gap: 1em;
+  width: 100%;
+  height: 100%;
+  overflow-y: auto;
+  padding: 0 1em;
 }

client/pages/Admin/LeaderboardConfig.tsx

@@ -2,6 +2,7 @@ import { fetcher, myToast } from "@/util/functions";
 import RootLayout from "../Layout";
 import styles from "./LeaderboardConfig.module.css";
 import useSWR from "swr";
+
 function useContests() {
 	const { data, error, isLoading, mutate } = useSWR(
 		`/api/admin/contestConfig`,
@@ -38,15 +39,17 @@ async function postContest(
 }
 
 import toast, { Toaster } from "react-hot-toast";
-import { Button, Input } from "@nextui-org/react";
+import { Box, Button, Input } from "@chakra-ui/react";
 import React from "react";
 
 export default function LeaderboardConfig() {
 	const { contests, isLoading, isError, mutate } = useContests();
 	const [contest, setContest] = React.useState("");
 	const [isLoadingPost, setIsLoadingPost] = React.useState(false);
 	const [isErrorPost, setIsErrorPost] = React.useState(false);
+
 	let listOfContests;
+
 	if (isLoading) {
 		listOfContests = <div>Loading...</div>;
 	} else if (isError) {
@@ -57,6 +60,7 @@ export default function LeaderboardConfig() {
 			return <div key={contest}>{contest}</div>;
 		});
 	}
+
 	return (
 		<RootLayout>
 			<main className={styles.main}>
@@ -66,12 +70,11 @@ export default function LeaderboardConfig() {
 						placeholder="Enter contest number"
 						className={styles.addInput}
 						value={contest}
-						onChange={(e) => setContest(e.target.value)}
+						onChange={(e: any) => setContest(e.target.value)}
 					/>
 
 					<Button
-						variant="ghost"
-						color="primary"
+						variant={"primary"}
 						className={styles.addBtn}
 						onClick={() => {
 							postContest(
@@ -92,8 +95,9 @@ export default function LeaderboardConfig() {
 						+
 					</Button>
 				</div>
+
 				<Toaster position="bottom-right" reverseOrder={false} />
-				<div>{listOfContests}</div>
+				<div className={styles.listConent}>{listOfContests}</div>
 			</main>
 		</RootLayout>
 	);

client/pages/Layout.tsx

@@ -1,7 +1,7 @@
 // import "./globals.css";
 
 import type { Metadata } from "next";
-import styles from "./Layout.module.css";
+import styles from "./styles/Layout.module.css";
 import NavBar from "./components/NavBar/NavBar";
 
 // for the fonts:

client/pages/_app.tsx

@@ -4,7 +4,8 @@ import type { AppProps } from "next/app";
 import type { Session } from "next-auth";
 import "./styles/globals.css";
 
-import { NextUIProvider } from "@nextui-org/react";
+import { ChakraProvider } from "@chakra-ui/react";
+import theme from "@/util/theme";
 
 export default function App({
 	Component,
@@ -13,9 +14,9 @@ export default function App({
 	return (
 		<main className="dark text-foreground bg-background">
 			<SessionProvider session={session}>
-				<NextUIProvider>
+				<ChakraProvider theme={theme}>
 					<Component {...pageProps} />
-				</NextUIProvider>
+				</ChakraProvider>
 			</SessionProvider>
 		</main>
 	);

client/pages/components/NavBar/NavBar.tsx

@@ -1,21 +1,20 @@
+import styles from "./Navbar.module.css";
+
 import {
 	Avatar,
-	Navbar,
-	NavbarBrand,
-	NavbarContent,
-	NavbarItem,
-} from "@nextui-org/react";
-import {
-	Dropdown,
-	DropdownTrigger,
-	DropdownMenu,
-	DropdownItem,
+	PopoverTrigger,
 	Button,
-} from "@nextui-org/react";
+	PopoverContent,
+	Menu,
+	MenuButton,
+	MenuList,
+} from "@chakra-ui/react";
+
 import Link from "next/link";
 import { signIn, signOut, useSession } from "next-auth/react";
 import { useRouter } from "next/router";
 import { useState } from "react";
+
 export default function NavBar() {
 	const { data: session } = useSession();
 	const [loading, setLoading] = useState(false);
@@ -28,6 +27,7 @@ export default function NavBar() {
 			link: "/",
 		},
 	];
+
 	if (session && session.user) {
 		if (session.user.role === "Admin") {
 			navItems.push({
@@ -36,22 +36,28 @@ export default function NavBar() {
 			});
 		}
 		authBtn = (
-			<>
-				<Dropdown className="dark text-foreground ">
-					<DropdownTrigger>
-						<Avatar src={session.user.image!} />
-					</DropdownTrigger>
-					<DropdownMenu aria-label="Static Actions">
-						<DropdownItem
-							key="new"
-							color="danger"
-							onClick={() => signOut()}
+			<div className={styles.navMenu}>
+				<Menu>
+					<MenuButton>
+						<Avatar
+							className={styles.avatarButton}
+							src={session.user.image!}
+						/>
+					</MenuButton>
+					<MenuList className={styles.menuList} minWidth='100x'>
+						<Button
+							variant={"secondary"}
+							onClick={() =>
+								signOut({
+									callbackUrl: "/",
+								})
+							}
 						>
 							Sign out
-						</DropdownItem>
-					</DropdownMenu>
-				</Dropdown>
-			</>
+						</Button>
+					</MenuList>
+				</Menu>	
+			</div>
 		);
 	} else {
 		authBtn = (
@@ -70,38 +76,27 @@ export default function NavBar() {
 	}
 
 	return (
-		<Navbar>
-			<NavbarBrand>
-				<p className="font-bold text-inherit">COC </p>
-			</NavbarBrand>
-			<NavbarContent className="hidden sm:flex gap-4" justify="center">
+		<div className={styles.mainNav}>
+			<div className={styles.navItem}>
 				{navItems.map((item) => (
-					<NavbarItem key={item.name}>
+					<div key={item.name}>
 						<Link href={item.link}>
-							<div
-								className={
-									item.link != router.pathname
-										? "text-foreground"
-										: "text-primary"
-								}
-							>
-								{item.name}
-							</div>
+							<div>{item.name}</div>
 						</Link>
-					</NavbarItem>
+					</div>
 				))}
-			</NavbarContent>
-			<NavbarContent justify="end">
+			</div>
+			<div className={styles.mainNavSide}>
 				{session && session.user && (
 					<>
-						<div>
-							{session.user.name}
-							<small>{session.user.role}</small>
+						<div className={styles.sideItems}>
+							<div>{session.user.name}</div>
+							<div>{session.user.role}</div>
 						</div>
 					</>
 				)}
-				<NavbarItem>{authBtn}</NavbarItem>
-			</NavbarContent>
-		</Navbar>
+				<div>{authBtn}</div>
+			</div>
+		</div>
 	);
 }

client/pages/components/NavBar/Navbar.module.css

@@ -0,0 +1,49 @@
+.mainNav {
+	margin: 0.5em;
+	padding: 0.5em;
+	display: flex;
+	flex-direction: row;
+	justify-content: space-between;
+	background-color: rgb(60, 60, 60);
+	border-radius: 0.5em;
+}
+
+.mainNavSide {
+	display: flex;
+	flex-direction: row;
+	justify-content: space-between;
+	gap: 1em;
+	color: white;
+}
+
+.sideItems {
+	display: flex;
+	flex-direction: column;
+	justify-content: space-around;
+	align-items: center;
+}
+.sideItems > :nth-child(2) {
+	display: flex;
+	flex-direction: row;
+	justify-content: flex-end;
+	align-items: flex-end;
+	gap: 1em;
+	width: 100%;
+}
+
+.navItem {
+	color: white;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	gap: 0.5em;
+}
+
+.avatarButton {
+	cursor: pointer;
+}
+.menuList {
+	min-width: 100px;
+	padding: 0.3em;
+}

client/pages/components/ScoreCard/ScoreCard.module.css

@@ -0,0 +1,23 @@
+.tableHeader {
+display: flex;
+    flex-direction: row;
+    align-items: center;
+    padding: 0 1rem;
+    /* margin-bottom: 1rem; */
+    gap:20px;
+}
+
+.tableEntry{
+    display: flex;
+    flex-direction: row;
+    width: 100%;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0 1rem;
+    /* margin-bottom: 1rem; */
+}
+.tableWrapper{
+    display: flex;
+    flex-direction: column;
+    width: max-content;
+}