diff --git a/src/components/Assignment/AssignmentCards.tsx b/src/components/Assignment/AssignmentCards.tsx new file mode 100644 index 0000000000000000000000000000000000000000..147fb55e515d3f31f9b68d0cfac7ed51144e2d1d --- /dev/null +++ b/src/components/Assignment/AssignmentCards.tsx @@ -0,0 +1,97 @@ +import { ViewIcon } from "@chakra-ui/icons" +import { + useColorModeValue, + chakra, + Stack, + Button, + Icon, + Box +} from "@chakra-ui/react" +import React from "react" +import { FiEdit } from "react-icons/fi" +import { Link } from "react-router-dom" + +interface AssignmentCardsProps { + index: Number + scholarship_id: Number + assignment_id: Number + assignment_name: string + assignment_description: string +} + +export const AssignmentCards: React.FC<AssignmentCardsProps> = (props) => { + const [applicants, setApplicants] = React.useState(0) + const [submissions, setSubmissions] = React.useState(0) + const { + scholarship_id, + assignment_id, + assignment_name, + assignment_description + } = props + + // TODO: SET THE APPLICANTS AND SUBMSISSIONS @MATTHEW MAHENDRA + + return ( + <Box + boxShadow={"lg"} + width={"full"} + maxW={"1048px"} + rounded={"xl"} + p={10} + position={"relative"} + bg={useColorModeValue("white", "gray.800")} + textAlign={"left"} + > + <chakra.h1 + fontSize={"2xl"} + fontWeight={"bold"} + color={useColorModeValue("gray.800", "white")} + mt={2} + > + {assignment_name} + </chakra.h1> + <chakra.p fontWeight={"medium"} fontSize={"15px"} pb={4}> + {assignment_description} + </chakra.p> + <Stack + direction={{ base: "column", md: "row" }} + align="center" + m="1rem" + justifyContent={"center"} + spacing={"5"} + > + <chakra.p fontWeight={"bold"} fontSize={14}> + Submissions: + <chakra.span fontWeight={"medium"} color={"gray.500"}> + {" "} + {submissions} / {applicants} + </chakra.span> + </chakra.p> + <Link + to={`/scholarships/${scholarship_id}/assignments/${assignment_id}/submissions`} + > + <Button + variant="ghost" + colorScheme="green" + size="sm" + leftIcon={<Icon as={ViewIcon} />} + > + View Submissions + </Button> + </Link> + <Link + to={`/scholarships/${scholarship_id}/assignments/${assignment_id}/edit`} + > + <Button + variant="ghost" + colorScheme="blue" + size="sm" + leftIcon={<Icon as={FiEdit} />} + > + Edit Assignment + </Button> + </Link> + </Stack> + </Box> + ) +} diff --git a/src/components/Assignment/AssignmentDetails.tsx b/src/components/Assignment/AssignmentDetails.tsx index 0098b4a17e18147bfab8d04c0a2c1856339db7d3..37756ef0f1a1512add1deb93de8fed19c6f77e05 100644 --- a/src/components/Assignment/AssignmentDetails.tsx +++ b/src/components/Assignment/AssignmentDetails.tsx @@ -1,9 +1,7 @@ -import { ViewIcon } from "@chakra-ui/icons" import { Box, Button, ButtonGroup, - chakra, Flex, FormControl, FormErrorMessage, @@ -20,7 +18,6 @@ import { ModalOverlay, SimpleGrid, Spacer, - Stack, Text, Textarea, useColorModeValue, @@ -28,17 +25,10 @@ import { } from "@chakra-ui/react" import React, { useEffect, useState } from "react" import { FiEdit } from "react-icons/fi" -import { Link, useParams } from "react-router-dom" +import { useParams } from "react-router-dom" import axios from "../../api/axios" import { Field, Form, Formik } from "formik" - -interface AssignmentCardsProps { - index: Number - scholarship_id: Number - assignment_id: Number - assignment_name: string - assignment_description: string -} +import { AssignmentCards } from "./AssignmentCards" const useFetchAssignments = () => { const [assignments, setAssignments] = useState([]) @@ -180,83 +170,6 @@ function CreateAssignmentModal() { ) } -function AssignmentCards(props: AssignmentCardsProps) { - const [applicants, setApplicants] = React.useState(0) - const [submissions, setSubmissions] = React.useState(0) - const { - scholarship_id, - assignment_id, - assignment_name, - assignment_description - } = props - - // TODO: SET THE APPLICANTS AND SUBMSISSIONS @MATTHEW MAHENDRA - - return ( - <Box - boxShadow={"lg"} - width={"full"} - maxW={"1048px"} - rounded={"xl"} - p={10} - position={"relative"} - bg={useColorModeValue("white", "gray.800")} - textAlign={"left"} - > - <chakra.h1 - fontSize={"2xl"} - fontWeight={"bold"} - color={useColorModeValue("gray.800", "white")} - mt={2} - > - {assignment_name} - </chakra.h1> - <chakra.p fontWeight={"medium"} fontSize={"15px"} pb={4}> - {assignment_description} - </chakra.p> - <Stack - direction={{ base: "column", md: "row" }} - align="center" - m="1rem" - justifyContent={"center"} - spacing={"5"} - > - <chakra.p fontWeight={"bold"} fontSize={14}> - Submissions: - <chakra.span fontWeight={"medium"} color={"gray.500"}> - {" "} - {submissions} / {applicants} - </chakra.span> - </chakra.p> - <Link - to={`/scholarships/${scholarship_id}/assignments/${assignment_id}/submissions`} - > - <Button - variant="ghost" - colorScheme="green" - size="sm" - leftIcon={<Icon as={ViewIcon} />} - > - View Submissions - </Button> - </Link> - <Link - to={`/scholarships/${scholarship_id}/assignments/${assignment_id}/edit`} - > - <Button - variant="ghost" - colorScheme="blue" - size="sm" - leftIcon={<Icon as={FiEdit} />} - > - Edit Assignment - </Button> - </Link> - </Stack> - </Box> - ) -} - const AssignmentDetails = () => { const { assignments, fetchAssignments } = useFetchAssignments()