feat: introduce Section

the-answerbook-project · May 17, 2024 · 9757da4 · 9757da4
1 parent 4d4bcd9
commit 9757da4
Show file tree

Hide file tree

Showing 2 changed files with 61 additions and 13 deletions.
diff --git a/src/QuestionPage.tsx b/src/QuestionPage.tsx
@@ -1,10 +1,12 @@
+import { Separator, Text } from '@radix-ui/themes'
 import React, { FC } from 'react'
 import { matchPath, useLocation } from 'react-router-dom'
 
 import ContextCard from './components/ContextCard'
 import Body from './components/pageStructure/Body'
 import Header from './components/pageStructure/Header'
 import Part from './components/questionStructure/Part'
+import Section from './components/questionStructure/Section'
 
 const QuestionPage: FC = () => {
   const { pathname } = useLocation()
@@ -19,10 +21,29 @@ const QuestionPage: FC = () => {
       a: {
         description: 'This is part a description',
         marksContribution: 20,
+        sections: {
+          i: {
+            description: 'This is section i description',
+          },
+          ii: {
+            description: 'This is section ii description',
+          },
+        },
       },
       b: {
-        description: 'This is part b description',
+        description:
+          'For this question, look at the code in the Q1 directory, related to streaming services. You have a class Subscription which can be constructed with different options (for example, the number of users, the video stream quality, whether the subscription includes movies, comedy, sports, etc).',
         marksContribution: 30,
+        sections: {
+          i: {
+            description:
+              'For this question, look at the code in the Q1 directory, related to streaming services. You have a class Subscription which can be constructed with different options (for example, the number of users, the video stream quality, whether the subscription includes movies, comedy, sports, etc).',
+          },
+          ii: {
+            description:
+              'For this question, look at the code in the Q1 directory, related to streaming services. You have a class Subscription which can be constructed with different options (for example, the number of users, the video stream quality, whether the subscription includes movies, comedy, sports, etc).',
+          },
+        },
       },
     },
   }
@@ -32,18 +53,21 @@ const QuestionPage: FC = () => {
       <Header primaryText={`Question ${pathMatch.params.number}`} secondaryText="TDD" />
       <Body>
         <ContextCard text={question.instructions} />
-        {Object.entries(question.parts).map(([partId, part]) => {
-          return (
-            <Part
-              key={partId}
-              partId={partId}
-              description={part.description}
-              marksContribution={part.marksContribution}
-            >
-              Here goes Part {partId} sections
-            </Part>
-          )
-        })}
+        {Object.entries(question.parts).map(([partId, part]) => (
+          <Part
+            key={partId}
+            partId={partId}
+            description={part.description}
+            marksContribution={part.marksContribution}
+          >
+            {Object.entries(part.sections).map(([sectionId, section], i) => (
+              <Section key={sectionId} sectionId={sectionId} description={section.description}>
+                <Text>Here goes the tasks</Text>
+                {i + 1 !== Object.keys(part.sections).length && <Separator size="4" />}
+              </Section>
+            ))}
+          </Part>
+        ))}
       </Body>
     </>
   )

diff --git a/src/components/questionStructure/Section.tsx b/src/components/questionStructure/Section.tsx
@@ -0,0 +1,24 @@
+import { Flex, Grid, Strong, Text } from '@radix-ui/themes'
+import React, { FC, ReactNode } from 'react'
+
+interface SectionProps {
+  sectionId: string
+  description?: string
+  children: ReactNode
+}
+
+const Section: FC<SectionProps> = ({ sectionId, description, children }) => {
+  return (
+    <Grid columns="1fr 5fr">
+      <Text>
+        <Strong>{sectionId})</Strong>
+      </Text>
+      <Flex gap="3" direction="column">
+        <Text>{description}</Text>
+        {children}
+      </Flex>
+    </Grid>
+  )
+}
+
+export default Section