feat: add frontend

frontend/components/QuizProgress.vue

@@ -0,0 +1,56 @@
+<template>
+    <div :style="cssVars" class="progress">
+      <span v-for="step in numberSteps" :key="step" class="step" :class="{ active: step <= currentStep }"></span>
+    </div>
+</template>
+<script lang="ts">
+import { Component, Prop, Vue}  from "nuxt-property-decorator";
+
+@Component
+export default class QuizProgress extends Vue {
+
+  @Prop({
+    type: Number
+  })
+  private numberSteps!: number;
+
+  @Prop({
+    required: true,
+    type: Number
+  })
+  private currentStep!: number;
+
+  @Prop({
+    required: true,
+    type: String
+  })
+  private color!: string;
+
+  get cssVars() {
+    return {
+      '--color': this.color
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+
+@import "assets/css/color";
+@import "assets/css/spacing";
+
+.progress {
+  display: flex;
+  justify-content: center;
+}
+.step {
+  border-radius: 2px;
+  border: 6px solid $gray_2;
+  margin: $x_small $xxx_small;
+  width: 30px;
+}
+
+.active {
+  border-color: var(--color);
+}
+
+</style>