QuizNavbarQuestion component

client/src/components/QuizNavbar/QuizNavbar.stories.svelte

@@ -0,0 +1,76 @@
+<script>
+  import {Meta, Template, Story} from '@storybook/addon-svelte-csf';
+  import QuizNavbar from './QuizNavbar.svelte';
+</script>
+
+<Meta
+  title="Example/QuizNavbar"
+  component={QuizNavbar}
+  argTypes={{
+    questions: {control: 'array'}
+  }}
+/>
+
+<Template let:args>
+  <QuizNavbar {...args} />
+</Template>
+
+<Story
+  name="Example Quiz Navbar"
+  args={{
+    questions: [
+      {
+        number: 1,
+        state: 'unanswered'
+      },
+      {
+        number: 2,
+        state: 'answered'
+      },
+      {
+        number: 3,
+        state: 'unanswered'
+      },
+      {
+        number: 4,
+        state: 'answered'
+      },
+      {
+        number: 5,
+        state: 'answered'
+      },
+      {
+        number: 6,
+        state: 'answered'
+      },
+      {
+        number: 7,
+        state: 'answered'
+      },
+      {
+        number: 8,
+        state: 'answered'
+      },
+      {
+        number: 9,
+        state: 'answered'
+      },
+      {
+        number: 10,
+        state: 'answered'
+      },
+      {
+        number: 11,
+        state: 'unanswered'
+      },
+      {
+        number: 12,
+        state: 'answered'
+      },
+      {
+        number: 13,
+        state: 'unanswered'
+      }
+    ]
+  }}
+/>

client/src/components/QuizNavbar/QuizNavbar.svelte

@@ -0,0 +1,64 @@
+<script>
+  import {QuizNavbarQuestion} from './QuizNavbarQuestion';
+  export let questions;
+  export let model;
+</script>
+
+<div class="main">
+  <div class="title">QUIZ</div>
+  {#each questions as question}
+    <QuizNavbarQuestion
+      number={question.number}
+      state={question.state}
+      {model}
+    />
+  {/each}
+</div>
+
+<style type="text/scss">
+  .main {
+    height: auto;
+    width: 16%;
+    align-items: center;
+    border-style: solid;
+    /* border-radius: 0.6rem;*/
+    border-width: 0.1rem;
+    border-color: white;
+    margin: 0.5rem;
+    padding: 1rem;
+    display: grid;
+    grid-template-columns: auto auto auto auto auto;
+    align-items: center;
+    justify-content: center;
+    background-color: #ffab40;
+  }
+
+  .title {
+    text-align: center;
+    font-family: 'Assistant', sans-serif;
+    color: white;
+    font-weight: bold;
+    width: 1rem;
+    padding: 1rem;
+  }
+  @media only screen and (max-width: 1900px) {
+    .main {
+      grid-template-columns: auto auto auto auto;
+    }
+  }
+  @media only screen and (max-width: 1600px) {
+    .main {
+      grid-template-columns: auto auto auto;
+    }
+  }
+  @media only screen and (max-width: 1300px) {
+    .main {
+      grid-template-columns: auto auto;
+    }
+  }
+  @media only screen and (max-width: 920px) {
+    .main {
+      grid-template-columns: auto;
+    }
+  }
+</style>

client/src/components/QuizNavbar/QuizNavbarQuestion/QuizNavbarQuestion.stories.svelte

@@ -0,0 +1,35 @@
+<script>
+  import {Meta, Template, Story} from '@storybook/addon-svelte-csf';
+  import QuizNavbarQuestion from './QuizNavbarQuestion.svelte';
+</script>
+
+<Meta
+  title="Example/QuizNavbarQuestion"
+  component={QuizNavbarQuestion}
+  argTypes={{
+    number: {control: 'number'},
+    state: {
+      options: ['unanswered', 'answered']
+    }
+  }}
+/>
+
+<Template let:args>
+  <QuizNavbarQuestion {...args} />
+</Template>
+
+<Story
+  name="Question 14"
+  args={{
+    number: 14,
+    state: 'unanswered'
+  }}
+/>
+
+<Story
+  name="Question 7"
+  args={{
+    number: 7,
+    state: 'answered'
+  }}
+/>

client/src/components/QuizNavbar/QuizNavbarQuestion/QuizNavbarQuestion.svelte

@@ -0,0 +1,37 @@
+<script>
+  export let number;
+  export let state;
+  export let model;
+</script>
+
+<meta name="viewport" content="width=device-width, initial-scale=1" />
+<div class="main {state}">
+  {number}
+</div>
+
+<style>
+  .main {
+    height: 1rem;
+    align-items: center;
+    border-style: solid;
+    border-radius: 0.5rem;
+    border-width: 0.1rem;
+    /* border-color: #c0c0c0; */
+
+    margin: 0.5rem;
+    width: 1rem;
+    padding: 1rem;
+    font-family: 'Assistant', sans-serif;
+  }
+
+  .answered {
+    background-color: #99ccff;
+    border-color: #99ccff;
+    color: white;
+  }
+
+  .unanswered {
+    background-color: white;
+    border-color: white;
+  }
+</style>

client/src/components/QuizNavbar/QuizNavbarQuestion/index.js

@@ -0,0 +1 @@
+export {default as QuizNavbarQuestion} from './QuizNavbarQuestion.svelte';

client/src/components/QuizNavbar/index.js

@@ -0,0 +1 @@
+export {default as QuizNavbar} from './QuizNavbar.svelte';