Merge pull request #370 from k-nearest-neighbor/a_few_dashboard_fixes

A few dashboard fixes

website/src/components/Dashboard/LeaderboardTable.tsx

@@ -1,6 +1,6 @@
 import { Badge, Box, Image, Link, Stack, StackDivider, Text, useColorModeValue } from "@chakra-ui/react";
 
-export function LeaderboardWidget() {
+export function LeaderboardTable() {
   const backgroundColor = useColorModeValue("white", "gray.700");
   const accentColor = useColorModeValue("gray.200", "gray.900");
 
@@ -54,7 +54,7 @@ export function LeaderboardWidget() {
       <div className="flex flex-col gap-4">
         <div className="flex items-end justify-between">
           <Text className="text-2xl font-bold">Top 5 Contributors</Text>
-          <Link key="Leaderboard" href="#" _hover={{ textDecoration: "none" }}>
+          <Link href="#" _hover={{ textDecoration: "none" }}>
             <Text color="blue.400" className="text-sm font-bold">
               View All -&gt;
             </Text>
@@ -74,8 +74,8 @@ export function LeaderboardWidget() {
                 <p>Score</p>
               </div>
             </div>
-            {leaderInfo.map((item) => (
+            {leaderInfo.map((item, itemIndex) => (
-              <div key="User" className="grid grid-cols-4 items-center">
+              <div key={itemIndex} className="grid grid-cols-4 items-center">
                 <div className="flex items-center gap-3">
                   <Image alt="Profile Picture" src={item.image} boxSize="7" borderRadius="full"></Image>
                   <p>{item.name}</p>

website/src/components/Dashboard/SideMenu.tsx

@@ -37,15 +37,15 @@ export function SideMenu() {
         className="grid grid-cols-4 gap-2 sm:flex sm:flex-col sm:justify-between p-4 h-full"
       >
         <nav className="grid grid-cols-3 col-span-3 sm:flex sm:flex-col gap-2">
-          {buttonOptions.map((item) => (
+          {buttonOptions.map((item, itemIndex) => (
             <Tooltip
-              key="Tooltip"
+              key={itemIndex}
               fontFamily="inter"
               label={item.label}
               placement="right"
               className="hidden lg:hidden sm:block"
             >
-              <Link key="{item.label}" href={item.pathname} style={{ textDecoration: "none" }}>
+              <Link key={`${item.label}-${itemIndex}`} href={item.pathname} style={{ textDecoration: "none" }}>
                 <Button
                   justifyContent={["center", "center", "center", "left"]}
                   gap="3"

website/src/components/Dashboard/TaskOption.tsx

@@ -46,8 +46,8 @@ export const TaskOption = () => {
       <div>
         <Text className="text-2xl font-bold pb-4">Create</Text>
         <SimpleGrid columns={[1, 2, 2, 3, 4]} gap={4}>
-          {crTasks.map((item) => (
+          {crTasks.map((item, itemIndex) => (
-            <Link key="Create Option" href={item.pathname}>
+            <Link key={itemIndex} href={item.pathname}>
               <GridItem
                 bg={backgroundColor}
                 borderRadius="xl"
@@ -82,8 +82,8 @@ export const TaskOption = () => {
       <div>
         <Text className="text-2xl font-bold pb-4">Evaluate</Text>
         <SimpleGrid columns={[1, 2, 2, 3, 4]} gap={4}>
-          {evTasks.map((item) => (
+          {evTasks.map((item, itemIndex) => (
-            <Link key="Evaluate Option" href={item.pathname}>
+            <Link key={itemIndex} href={item.pathname}>
               <GridItem
                 bg={backgroundColor}
                 borderRadius="xl"

website/src/components/Dashboard/index.ts

@@ -1,3 +1,3 @@
-export { LeaderboardWidget } from "./LeaderboardWidget";
+export { LeaderboardTable } from "./LeaderboardTable";
 export { SideMenu } from "./SideMenu";
 export { TaskOption } from "./TaskOption";

website/src/pages/dashboard.tsx

@@ -1,7 +1,7 @@
 import { Box, useColorMode } from "@chakra-ui/react";
 import Head from "next/head";
 import { Header } from "src/components/Header";
-import { LeaderboardWidget, SideMenu, TaskOption } from "src/components/Widgets";
+import { LeaderboardTable, SideMenu, TaskOption } from "src/components/Dashboard";
 import { colors } from "styles/Theme/colors";
 
 const Dashboard = () => {
@@ -19,7 +19,7 @@ const Dashboard = () => {
           </Box>
           <Box className="flex flex-col overflow-auto p-6 sm:pl-0 gap-14">
             <TaskOption />
-            <LeaderboardWidget />
+            <LeaderboardTable />
           </Box>
         </Box>
       </Box>