feat: add breadcrumb trail

exKAZUu-Research · Sep 24, 2024 · 15d3bf2 · 15d3bf2
1 parent 14b6968
commit 15d3bf2
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 11 deletions.
diff --git a/src/app/(withAuth)/courses/[courseId]/lectures/[lectureId]/pageOnClient.tsx b/src/app/(withAuth)/courses/[courseId]/lectures/[lectureId]/pageOnClient.tsx
@@ -51,7 +51,11 @@ export const Lecture: React.FC<Props> = (props) => {
 
   return (
     <VStack align="stretch" spacing={6}>
-      <Heading as="h1">{courseIdToName[props.params.courseId]}</Heading>
+      <Heading as="h1">
+        <Link as={NextLink} href={`/courses/${props.params.courseId}`}>
+          {courseIdToName[props.params.courseId]}
+        </Link>
+      </Heading>
 
       <SimpleGrid columnGap={4} mx="auto" rowGap={6} w={{ base: '100%', lg: '80%' }}>
         <Card>
@@ -116,16 +120,16 @@ export const Lecture: React.FC<Props> = (props) => {
                         />
                       </Td>
                       <Td textOverflow="ellipsis" whiteSpace="nowrap">
-                        <VStack align="flex-start">
+                        <HStack align="center" spacing={2}>
+                          <Link as={NextLink} href={`${props.params.lectureId}/problems/${problemId}`}>
+                            {problemIdToName[problemId]}
+                          </Link>
                           {suspendedSession && (
                             <Tag colorScheme="brand" fontWeight="bold" size="sm" variant="solid">
                               挑戦中
                             </Tag>
                           )}
-                          <Link as={NextLink} href={`${props.params.lectureId}/problems/${problemId}`}>
-                            {problemIdToName[problemId]}
-                          </Link>
-                        </VStack>
+                        </HStack>
                       </Td>
                       <Td isNumeric color="gray.600">
                         {firstSession?.answers.filter((a) => !a.isCorrect).length ?? 0}

diff --git a/.../(withAuth)/courses/[courseId]/lectures/[lectureId]/problems/[problemId]/pageOnClient.tsx b/.../(withAuth)/courses/[courseId]/lectures/[lectureId]/problems/[problemId]/pageOnClient.tsx
@@ -7,10 +7,10 @@ import { useIdleTimer } from 'react-idle-timer';
 
 import { INTERVAL_MS_OF_IDLE_TIMER } from '../../../../../../../../constants';
 import { backendTrpcReact } from '../../../../../../../../infrastructures/trpcBackend/client';
-import { Heading, Link, VStack } from '../../../../../../../../infrastructures/useClient/chakra';
+import { Heading, HStack, Link, Text, VStack } from '../../../../../../../../infrastructures/useClient/chakra';
 import type { Problem } from '../../../../../../../../problems/generateProblem';
 import type { CourseId, ProblemId } from '../../../../../../../../problems/problemData';
-import { courseIdToName, problemIdToName } from '../../../../../../../../problems/problemData';
+import { courseIdToLectureIds, courseIdToName, problemIdToName } from '../../../../../../../../problems/problemData';
 import type { ProblemType } from '../../../../../../../../types';
 
 import { CheckpointProblem, ExecutionResultProblem, StepProblem } from './Problems';
@@ -27,6 +27,7 @@ export const ProblemPageOnClient: React.FC<Props> = (props) => {
   const [problemType, setProblemType] = useState<ProblemType>(
     props.initialProblemSession.currentProblemType as ProblemType
   );
+  const lectureIndex = courseIdToLectureIds[props.params.courseId].indexOf(props.params.lectureId);
 
   const [currentTraceItemIndex, setCurrentTraceItemIndex] = useState(0);
   const [previousTraceItemIndex, setPreviousTraceItemIndex] = useState(0);
@@ -120,9 +121,20 @@ export const ProblemPageOnClient: React.FC<Props> = (props) => {
   return (
     <VStack align="stretch" spacing={8}>
       <VStack align="stretch" spacing={1}>
-        <Link as={NextLink} color="gray.600" fontWeight="bold" href={`/courses/${props.params.courseId}`}>
-          {courseIdToName[props.params.courseId]}
-        </Link>
+        <HStack spacing={2}>
+          <Link as={NextLink} color="gray.600" fontWeight="bold" href={`/courses/${props.params.courseId}`}>
+            {courseIdToName[props.params.courseId]}
+          </Link>
+          <Text color="gray.600">{'>'}</Text>
+          <Link
+            as={NextLink}
+            color="gray.600"
+            fontWeight="bold"
+            href={`/courses/${props.params.courseId}/lectures/${props.params.lectureId}`}
+          >
+            第{lectureIndex + 1}回
+          </Link>
+        </HStack>
         <Heading as="h1">{problemIdToName[props.params.problemId]}</Heading>
       </VStack>