GridList

GridList.jsx

const LearningPathDetailsPage = () => {
  return (
    <CoachLayout>
      <Container maxW="7xl">
        <Flex align="center" justify="space-between">
          <Heading>Learning Path Name</Heading>
          <Button mt="4" bg="green.400" _hover={{bgColor: "green.600"}} leftIcon={<Icon as={FiEdit}/>}>Edit Path</Button>
        </Flex>
        {/* <Heading size="lg" color="gray.500">Student Name</Heading> */}
        <Grid
          mt="6"
          templateRows="auto"
          templateColumns="repeat(8, 1fr)"
          gap="4"
        >
          <GridItem colSpan={{base: 8, xl: 5}} rowSpan="auto" >
            <Heading size="lg">Steps</Heading>
            <Box>
              <LearningPath />
            </Box>
          </GridItem>
          <GridItem rounded="lg" p="4" colSpan={{base: 8, xl: 3}} rowSpan="auto" bg="gray.700">
            <Box>
              <Heading size="lg">Student Progress</Heading>
              <VStack width="100%" spacing="4">
                <Flex width="100%" mt="4">
                  <Flex width="100%">
                    <Avatar />
                    <Box ml="4" width="100%">
                      <Text>Student Name</Text>
                      <Progress colorScheme="green" rounded="full" value={Math.floor(Math.random() * 100)} width="100%" />
                    </Box>
                  </Flex>
                </Flex>
                <Flex width="100%" mt="4">
                  <Flex width="100%">
                    <Avatar />
                    <Box ml="4" width="100%">
                      <Text>Student Name</Text>
                      <Progress colorScheme="green" rounded="full" value={Math.floor(Math.random() * 100)} width="100%" />
                    </Box>
                  </Flex>
                </Flex>
                <Flex width="100%" mt="4">
                  <Flex width="100%">
                    <Avatar />
                    <Box ml="4" width="100%">
                      <Text>Student Name</Text>
                      <Progress colorScheme="green" rounded="full" value={Math.floor(Math.random() * 100)} width="100%" />
                    </Box>
                  </Flex>
                </Flex>
                <Flex width="100%" mt="4">
                  <Flex width="100%">
                    <Avatar />
                    <Box ml="4" width="100%">
                      <Text>Student Name</Text>
                      <Progress colorScheme="green" rounded="full" value={Math.floor(Math.random() * 100)} width="100%" />
                    </Box>
                  </Flex>
                </Flex>
              </VStack>
            </Box>
          </GridItem>
          <GridItem colSpan={{base: 8, xl: 5}}>
            <Box bg="tomato" height="4"></Box>
          </GridItem>
          <GridItem colSpan={{base: 8, xl: 3}}>
            <Box bg="tomato" height="4"></Box>
          </GridItem>
        </Grid>
      </Container>
    </CoachLayout>
  )
}