style: display progress

exKAZUu-Research · Feb 13, 2024 · 9cd9c33 · 9cd9c33
1 parent 7defeab
commit 9cd9c33
Showing 1 changed file with 33 additions and 11 deletions.
diff --git a/src/app/(withAuth)/courses/[courseId]/page.tsx b/src/app/(withAuth)/courses/[courseId]/page.tsx
@@ -3,15 +3,20 @@
 import {
   Box,
   Heading,
-  OrderedList,
-  ListItem,
   VStack,
   Accordion,
   AccordionItem,
   AccordionButton,
   AccordionIcon,
   AccordionPanel,
   Select,
+  Table,
+  TableContainer,
+  Thead,
+  Tbody,
+  Tr,
+  Td,
+  Th,
 } from '@chakra-ui/react';
 import type { NextPage } from 'next';
 import NextLink from 'next/link';
@@ -28,6 +33,8 @@ import { getLanguageIdFromSessionStorage, setLanguageIdToSessionStorage } from '
 const CoursePage: NextPage<{ params: { courseId: string } }> = ({ params }) => {
   const [selectedLanguageId, setSelectedLanguageId] = useState('');
 
+  const SPECIFIED_COMPLETION_COUNT = 2;
+
   useEffect(() => {
     setSelectedLanguageId(getLanguageIdFromSessionStorage());
   }, []);
@@ -68,15 +75,30 @@ const CoursePage: NextPage<{ params: { courseId: string } }> = ({ params }) => {
                   <AccordionIcon />
                 </AccordionButton>
                 <AccordionPanel pb={4}>
-                  <OrderedList>
-                    {programIds.map((programId) => (
-                      <ListItem key={programId}>
-                        <NextLink passHref href={`${params.courseId}/programs/${programId}`}>
-                          {programIdToName[programId]}
-                        </NextLink>
-                      </ListItem>
-                    ))}
-                  </OrderedList>
+                  <TableContainer>
+                    <Table>
+                      <Thead>
+                        <Tr>
+                          <Th textAlign="left">プログラム</Th>
+                          <Th align="left">進捗</Th>
+                        </Tr>
+                      </Thead>
+                      <Tbody>
+                        {programIds.map((programId) => (
+                          <Tr key={programId}>
+                            <Td>
+                              <NextLink passHref href={`${params.courseId}/programs/${programId}`}>
+                                {programIdToName[programId]}
+                              </NextLink>
+                            </Td>
+                            <Td>
+                              <p>completedProblemCount / {SPECIFIED_COMPLETION_COUNT}</p>
+                            </Td>
+                          </Tr>
+                        ))}
+                      </Tbody>
+                    </Table>
+                  </TableContainer>
                 </AccordionPanel>
               </AccordionItem>
             </Accordion>