course data and grid and mobile

src/app/course/components/list-items.tsx

@@ -1,4 +1,5 @@
-import { Flex, ListItem, UnorderedList, useMediaQuery } from "@chakra-ui/react";
+import { Flex, ListItem, UnorderedList, useMediaQuery, Text, Stack } from "@chakra-ui/react";
+import { TextDescription } from "./text-description";
 import { memo } from "react";
 
 export const UnorderList = memo(({children, props}:{children: any; [key: string]: any}) => {
@@ -15,4 +16,32 @@ export const UnorderList = memo(({children, props}:{children: any; [key: string]
       {children}
     </UnorderedList>
   )
-})
+})
+
+export const PointList = (props) => {
+  const { type, content, isMax959 } = props;
+  return type === 'column' ? 
+    <UnorderList>
+      {content?.length ? content.map((item, i) => (<ListItem key={i}>
+        <Text key={i} textStyle="Regular16">
+          {item}
+        </Text>
+      </ListItem>)) : null}
+    </UnorderList>
+  : <Flex direction={isMax959 ? "column" : "row"} mb="md">
+     <Flex direction="column" alignItems="flex-start" justify="flex-start" w={isMax959 ? '100%' : '50%'} mr={isMax959 ? 0 : '2rem'}>
+      {content?.['1column'] ? content?.['1column'].map((item, i) => 
+       <Stack direction={!isMax959 ? 'row' : 'column'} key={i} spacing={isMax959 ? '0.5rem' : '1rem'} mb="xs">
+         { item['1part'] ? <Text textStyle="Bold16">{item['1part']}</Text> : null }
+         { item['2part'] ? <TextDescription mb={0} text={item['2part']} /> : null }
+       </Stack> ) : null}
+     </Flex>
+     <Flex direction="column" alignItems="flex-start" justify="flex-start" w={isMax959 ? '100%' : '50%'}>
+     {content?.['2column'] ? content?.['2column'].map((item, i) => 
+       <Stack direction={!isMax959 ? 'row' : 'column'} key={i} spacing={isMax959 ? '0.5rem' : '1rem'} mb="xs">
+         { item['1part'] ? <Text textStyle="Bold16">{item['1part']}</Text> : null }
+         { item['2part'] ? <TextDescription mb={0} text={item['2part']} /> : null }
+       </Stack> ) : null}
+     </Flex>
+   </Flex>;
+}

src/app/course/components/red-square-title.tsx

@@ -2,23 +2,27 @@ import { Box, Flex, Text } from "@chakra-ui/react"
 import { memo } from "react"
 
 export const RedSquareTitle = memo(({
+  id,
+  displayRed = true,
   squareMR = "2rem", 
   containerMR = "7rem",
   containerDirection = "row",
   alignItems = 'flex-start',
   justify = 'flex-start',
   children
 }:{
+  displayRed?: boolean;
   squareMR?: string; 
   containerMR?: string;
   containerDirection?: any;
   alignItems?: string;
   justify?: string;
   children: any;
+  id?: string;
 }) => {
   return (<Flex direction={containerDirection} alignItems={alignItems} justify={justify} mb={containerMR}>
 
-      <Box w='xs' h='xs' bg='secondary' mr={squareMR} />
+      { displayRed ? <Box w='xs' h='xs' bg='secondary' mr={squareMR} id={id} /> : null }
 
       {children}
     </Flex>