Create question details component

src/components/ItemCart/index.tsx

@@ -1,14 +1,14 @@
 import React from 'react';
 import { PROJECT_COLORS } from '../../constants/theme';
 import ProjectPage from '../ProjectPage';
+import QuestionDetails from '../QuestionDetails';
 import classes from './styles.module.scss';
 
 const ItemCart: React.FC<Props> = () => {
   return (
     <ProjectPage background={PROJECT_COLORS.PROJECT2.background}>
-      <section className={classes.questionContainer}>
-        <h2 className={classes.questionTitle}>Item Cart</h2>
-        <p className={classes.questionDescription}>Implement an item cart in HTML with the following static data:</p>
+      <QuestionDetails title='Item Cart' titleClassName={classes.questionTitle}>
+        <p>Implement an item cart in HTML with the following static data:</p>
         <ul className={classes.questionPoints}>
           <li className={classes.questionPoint}>
             There must be three columns with Item, Price and Quantity as the column headers
@@ -20,10 +20,8 @@ const ItemCart: React.FC<Props> = () => {
             The data for last row must be Total, $12.10 and 8. Total acts as a row title for the last row.
           </li>
         </ul>
-        <p className={classes.questionDescription}>
-          Your HTML code should use a table with proper semantic markup and with Item Cart as its caption.
-        </p>
-      </section>
+        <p>Your HTML code should use a table with proper semantic markup and with Item Cart as its caption.</p>
+      </QuestionDetails>
       <table className={classes.tableContainer}>
         <caption className={classes.tableCaption}>Item Cart</caption>
         <thead>

src/components/ItemCart/styles.module.scss

@@ -1,48 +1,29 @@
 @import '../../utils/mixins.scss';
+@import '../../constants/theme.scss';
 
-.questionContainer {
-  padding: 1rem;
-  border: 1px dotted rgba($color: $dark, $alpha: 0.5);
-  border-radius: 0.25rem;
-  width: 100%;
-  max-width: 30rem;
-  align-self: stretch;
+.questionTitle {
+  color: $project-header-2;
+}
 
-  .questionTitle {
-    color: $project-header-2;
-    letter-spacing: -0.25px;
-    margin-bottom: 1rem;
-  }
+.questionPoints {
+  margin: 0.5rem 0;
 
-  .questionDescription {
+  .questionPoint {
     color: $dark;
     letter-spacing: -0.2px;
     font-size: 0.85rem;
+    margin: 0.25rem 0;
 
     @media screen and (min-width: 992px) {
       font-size: 0.95rem;
     }
   }
-
-  .questionPoints {
-    margin: 0.5rem 0;
-
-    .questionPoint {
-      color: $dark;
-      letter-spacing: -0.2px;
-      font-size: 0.85rem;
-      margin: 0.25rem 0;
-
-      @media screen and (min-width: 992px) {
-        font-size: 0.95rem;
-      }
-    }
-  }
 }
 
 .tableContainer {
   border: 1px solid $project-table-header-2;
   border-collapse: separate;
+  align-self: stretch;
 
   .tableCaption {
     font-size: 1.5rem;

src/components/QuestionDetails/index.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import classes from './styles.module.scss';
+
+const QuestionDetails: React.FC<QuestionDetailsProps> = (props) => {
+  const {
+    title,
+    titleClassName = '',
+    titleStyle = {},
+    containerClassName = '',
+    containerStyle = {},
+    descriptionClassName = '',
+    descriptionStyle = {},
+    children,
+  } = props;
+  return (
+    <section className={`${classes.questionContainer} ${containerClassName}`} style={containerStyle}>
+      <h2 className={`${classes.questionTitle} ${titleClassName}`} style={titleStyle}>
+        {title}
+      </h2>
+      <div className={`${classes.questionDescription} ${descriptionClassName}`} style={descriptionStyle}>
+        {children}
+      </div>
+    </section>
+  );
+};
+
+export default QuestionDetails;

src/components/QuestionDetails/styles.module.scss

@@ -0,0 +1,26 @@
+@import '../../constants/theme.scss';
+@import '../../utils/mixins.scss';
+
+.questionContainer {
+  @include spacing(1rem);
+  border: 1px dotted rgba($color: $dark, $alpha: 0.5);
+  border-radius: 0.25rem;
+  width: 100%;
+  max-width: 30rem;
+  align-self: stretch;
+
+  .questionTitle {
+    letter-spacing: -0.25px;
+    margin-bottom: 1rem;
+  }
+
+  .questionDescription {
+    color: $dark;
+    letter-spacing: -0.2px;
+    font-size: 0.85rem;
+
+    @media screen and (min-width: 992px) {
+      font-size: 0.95rem;
+    }
+  }
+}

src/components/SignUpForm/index.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { PROJECT_COLORS } from '../../constants/theme';
 import ProjectPage from '../ProjectPage';
+import QuestionDetails from '../QuestionDetails';
 import Button from '../UI/Button';
 import FormGroup from '../UI/FormGroup';
 import Input from '../UI/Input';
@@ -10,11 +11,13 @@ import classes from './styles.module.scss';
 const SignUpForm: React.FC<Props> = () => {
   return (
     <ProjectPage background={PROJECT_COLORS.PROJECT1.background}>
-      <section className={classes.questionContainer}>
-        <h2 className={classes.questionTitle}>Sign-Up Form</h2>
-        <p className={classes.questionDescription}>
-          Implement a sign-up form in HTML with the following six input fields, each with an appropriate label:
-        </p>
+      <QuestionDetails
+        title='Sign-Up Form'
+        titleClassName={classes.questionTitle}
+        containerClassName={classes.questionContainer}
+        descriptionClassName={classes.questionDescription}
+      >
+        <p>Implement a sign-up form in HTML with the following six input fields, each with an appropriate label:</p>
         <ol className={classes.questionPoints}>
           <li className={classes.questionPoint}>
             <strong>Username</strong>, a required text input field
@@ -35,11 +38,11 @@ const SignUpForm: React.FC<Props> = () => {
             <strong>I agree to the TOS</strong>, a required checkbox input field
           </li>
         </ol>
-        <p className={classes.questionDescription}>
+        <p>
           There should also be a <strong>Sign Up</strong> button at the bottom of the form. When clicked on (and if
           required fields have been filled), the button should submit the form using default browser behaviour.
         </p>
-      </section>
+      </QuestionDetails>
       <form className={classes.formContainer}>
         <FormGroup>
           <Label htmlFor='username'>Username</Label>

src/components/SignUpForm/styles.module.scss

@@ -1,58 +1,46 @@
 @import '../../utils/mixins.scss';
+@import '../../constants/theme.scss';
 
 .questionContainer {
-    padding: 1rem;
-    border: 1px dotted rgba($color: $white, $alpha: 0.5);
-    border-radius: 0.25rem;
-    width: 100%;
-    max-width: 30rem;
-    align-self: stretch;
-
-    .questionTitle {
-        color: $project-header-1;
-        letter-spacing: -0.25px;
-        margin-bottom: 1rem;
-    }
+  border: 1px dotted rgba($color: $white, $alpha: 0.5);
 
-    .questionDescription {
-        color: $light;
-        letter-spacing: -0.2px;
-        font-size: 0.85rem;
+  .questionTitle {
+    color: $project-header-1;
+  }
 
-        @media screen and (min-width: 992px) {
-            font-size: 0.95rem;
-        }
-    }
+  .questionDescription {
+    color: $light;
+  }
 
-    .questionPoints {
-        margin: 0.5rem 0;
+  .questionPoints {
+    margin: 0.5rem 0;
 
-        .questionPoint {
-            color: $light;
-            letter-spacing: -0.2px;
-            font-size: 0.85rem;
-            margin: 0.25rem 0;
+    .questionPoint {
+      color: $light;
+      letter-spacing: -0.2px;
+      font-size: 0.85rem;
+      margin: 0.25rem 0;
 
-            strong {
-                color: $project-highlight-1;
-            }
+      strong {
+        color: $project-highlight-1;
+      }
 
-            @media screen and (min-width: 992px) {
-                font-size: 0.95rem;
-            }
-        }
+      @media screen and (min-width: 992px) {
+        font-size: 0.95rem;
+      }
     }
+  }
 }
 
 .formContainer {
-    padding: 1rem;
-    border: 1px dotted rgba($color: $white, $alpha: 0.5);
-    border-radius: 0.25rem;
-    max-width: 25rem;
-    width: 100%;
+  padding: 1rem;
+  border: 1px dotted rgba($color: $white, $alpha: 0.5);
+  border-radius: 0.25rem;
+  max-width: 25rem;
+  width: 100%;
 }
 
 .tosFormGroup {
-    display: flex;
-    gap: 1rem;
+  display: flex;
+  gap: 1rem;
 }

src/types/props.d.ts

@@ -35,3 +35,13 @@ interface ProjectPageProps extends Props {
   containerStyle?: React.CSSProperties;
   containerClassName?: string;
 }
+
+interface QuestionDetailsProps extends Props {
+  title: string;
+  containerStyle?: React.CSSProperties;
+  containerClassName?: string;
+  titleStyle?: React.CSSProperties;
+  titleClassName?: string;
+  descriptionStyle?: React.CSSProperties;
+  descriptionClassName?: string;
+}