Add exercise preview cards to DOJO exercises page

__tests__/__snapshots__/storyshots.test.js.snap

@@ -5271,6 +5271,78 @@ a = b;
 </div>
 `;
 
+exports[`Storyshots Components/ExercisePreviewCard Answered 1`] = `
+<section
+  className="card p-3 d-inline-block border-0 shadow position-relative overflow-hidden "
+>
+  <div
+    className="exercisePreviewCard__topBorder__success"
+  />
+  <div
+    className="d-flex align-items-center mb-3"
+  >
+    <h2
+      className="fw-bold fs-6 my-2 me-4"
+    >
+      VARIABLES
+    </h2>
+    <div
+      className="badge exercisePreviewCard__topMessage__success"
+    >
+      ANSWERED
+    </div>
+  </div>
+  <div
+    className="mb-2"
+  >
+    Problem
+  </div>
+  <pre
+    className="bg-light py-2 px-3"
+  >
+    const a = 5
+a = a + 10
+// what is a?
+  </pre>
+</section>
+`;
+
+exports[`Storyshots Components/ExercisePreviewCard Not Answered 1`] = `
+<section
+  className="card p-3 d-inline-block border-0 shadow position-relative overflow-hidden "
+>
+  <div
+    className="exercisePreviewCard__topBorder__danger"
+  />
+  <div
+    className="d-flex align-items-center mb-3"
+  >
+    <h2
+      className="fw-bold fs-6 my-2 me-4"
+    >
+      VARIABLES
+    </h2>
+    <div
+      className="badge exercisePreviewCard__topMessage__danger"
+    >
+      NOT ANSWERED
+    </div>
+  </div>
+  <div
+    className="mb-2"
+  >
+    Problem
+  </div>
+  <pre
+    className="bg-light py-2 px-3"
+  >
+    const a = 5
+a = a + 10
+// what is a?
+  </pre>
+</section>
+`;
+
 exports[`Storyshots Components/FilterButtons Basic 1`] = `
 <div
   className="d-flex flex-row"

components/ExercisePreviewCard.tsx

@@ -0,0 +1,43 @@
+import React from 'react'
+import styles from '../scss/exercisePreviewCard.module.scss'
+
+export type ExercisePreviewCardProps = {
+  topic: string
+  state: 'NOT ANSWERED' | 'ANSWERED'
+  problem: string
+  className?: string
+}
+
+const ExercisePreviewCard = ({
+  topic,
+  state,
+  problem,
+  className = ''
+}: ExercisePreviewCardProps) => {
+  const [topBorderStyle, topMessageStyle] =
+    state === 'ANSWERED'
+      ? [
+          styles.exercisePreviewCard__topBorder__success,
+          styles.exercisePreviewCard__topMessage__success
+        ]
+      : [
+          styles.exercisePreviewCard__topBorder__danger,
+          styles.exercisePreviewCard__topMessage__danger
+        ]
+
+  return (
+    <section
+      className={`card p-3 d-inline-block border-0 shadow position-relative overflow-hidden ${className}`}
+    >
+      <div className={topBorderStyle} />
+      <div className="d-flex align-items-center mb-3">
+        <h2 className="fw-bold fs-6 my-2 me-4">{topic.toUpperCase()}</h2>
+        <div className={`badge ${topMessageStyle}`}>{state}</div>
+      </div>
+      <div className="mb-2">Problem</div>
+      <pre className="bg-light py-2 px-3">{problem}</pre>
+    </section>
+  )
+}
+
+export default ExercisePreviewCard

pages/exercises/[lessonSlug].tsx

@@ -10,6 +10,19 @@ import LoadingSpinner from '../../components/LoadingSpinner'
 import GET_APP from '../../graphql/queries/getApp'
 import AlertsDisplay from '../../components/AlertsDisplay'
 import NavCard from '../../components/NavCard'
+import ExercisePreviewCard, {
+  ExercisePreviewCardProps
+} from '../../components/ExercisePreviewCard'
+
+const exampleProblem = `const a = 5
+a = a + 10
+// what is a?`
+
+const mockExercisePreviews: ExercisePreviewCardProps[] = [
+  { topic: 'Variables', state: 'ANSWERED', problem: exampleProblem },
+  { topic: 'Variables', state: 'NOT ANSWERED', problem: exampleProblem },
+  { topic: 'Variables', state: 'ANSWERED', problem: exampleProblem }
+]
 
 const Exercises: React.FC<QueryDataProps<GetAppQuery>> = ({ queryData }) => {
   const { lessons, alerts } = queryData
@@ -38,8 +51,23 @@ const Exercises: React.FC<QueryDataProps<GetAppQuery>> = ({ queryData }) => {
         tabSelected={tabs.findIndex(tab => tab.text === 'exercises')}
         tabs={tabs}
       />
-      <h1 className="mt-3">{currentLesson.title}</h1>
+      <h1 className="my-4">{currentLesson.title}</h1>
       {alerts && <AlertsDisplay alerts={alerts} />}
+      <div className="container">
+        <div className="row">
+          {mockExercisePreviews.map((exercisePreview, i) => (
+            <ExercisePreviewCard
+              key={i}
+              topic={exercisePreview.topic}
+              state={exercisePreview.state}
+              problem={exercisePreview.problem}
+              className={`col ${
+                i < mockExercisePreviews.length - 1 ? 'me-4' : ''
+              }`}
+            />
+          ))}
+        </div>
+      </div>
     </Layout>
   )
 }

scss/exercisePreviewCard.module.scss

@@ -0,0 +1,35 @@
+@use './_variables.module';
+
+%exercisePreviewCard__topBorder {
+  height: 5px;
+  width: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+
+.exercisePreviewCard__topBorder__success {
+  @extend %exercisePreviewCard__topBorder;
+  background-color: variables.$success;
+}
+
+.exercisePreviewCard__topBorder__danger {
+  @extend %exercisePreviewCard__topBorder;
+  background-color: variables.$danger;
+}
+
+%exercisePreviewCard__topMessage {
+  font-size: 14px;
+}
+
+.exercisePreviewCard__topMessage__success {
+  @extend %exercisePreviewCard__topMessage;
+  color: variables.$success;
+  border: 1px solid variables.$success;
+}
+
+.exercisePreviewCard__topMessage__danger {
+  @extend %exercisePreviewCard__topMessage;
+  color: variables.$danger;
+  border: 1px solid variables.$danger;
+}

stories/components/ExercisePreviewCard.stories.tsx

@@ -0,0 +1,31 @@
+import React from 'react'
+import ExercisePreviewCard from '../../components/ExercisePreviewCard'
+
+export default {
+  component: ExercisePreviewCard,
+  title: 'Components/ExercisePreviewCard'
+}
+
+const exampleProblem = `const a = 5
+a = a + 10
+// what is a?`
+
+export const Answered = () => {
+  return (
+    <ExercisePreviewCard
+      topic="Variables"
+      state="ANSWERED"
+      problem={exampleProblem}
+    />
+  )
+}
+
+export const NotAnswered = () => {
+  return (
+    <ExercisePreviewCard
+      topic="Variables"
+      state="NOT ANSWERED"
+      problem={exampleProblem}
+    />
+  )
+}