💄 Add timetable design

src/definitions.js

@@ -0,0 +1 @@
+export const dayNames = ["Monday", "Tuesday", "Wednesday", "Thursay", "Friday"];

src/store.js

@@ -0,0 +1,16 @@
+import { computed } from "@vue/reactivity";
+import { ref } from "vue";
+
+export const timetable = ref([]);
+
+export const parsedTimetable = computed(() => {
+  return timetable.value.map((day) => {
+    const newDay = [];
+    for (const lesson of day) {
+      const lessonLength = lesson.length || 1;
+      delete lesson.length;
+      for (var i = 0; i < lessonLength; i++) newDay.push(lesson);
+    }
+    return newDay;
+  });
+});

src/views/TimetableView.vue

@@ -1,5 +1,70 @@
+<script setup>
+import { parsedTimetable } from "../store";
+import { dayNames } from "../definitions";
+import { ref } from "vue";
+
+const timetableDay = ref(0);
+</script>
 <template>
-  <main>
-    <h1>Hello World!</h1>
-  </main>
+  <div class="timetable">
+    <div class="title">
+      <span class="day">{{ dayNames[timetableDay] }}</span>
+    </div>
+
+    <template
+      v-for="(lesson, index) in parsedTimetable[timetableDay]"
+      :key="index"
+    >
+      <div class="lesson">
+        <span class="hour">{{ index + 1 }}</span>
+        <div class="infos">
+          <span class="subject">{{ lesson.subject }}</span>
+          <span class="info">{{ lesson.teacher }}, {{ lesson.room }}</span>
+        </div>
+      </div>
+    </template>
+  </div>
 </template>
+
+<style scoped>
+.timetable {
+  padding: 65px 10px 80px 10px;
+}
+
+.title {
+  font-size: 18px;
+}
+
+.lesson {
+  display: grid;
+  background-color: #26272a;
+  height: 60px;
+  border-radius: 11px;
+  margin: 10px 0px;
+  padding: 10px;
+  grid-template-columns: max-content max-content;
+  gap: 10px;
+}
+
+.hour {
+  font-size: 30px;
+  display: flex;
+  align-items: center;
+}
+
+.infos {
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+}
+
+.infos .subject {
+  font-weight: bold;
+  font-size: 18px;
+}
+
+.infos .info {
+  font-weight: 200;
+  font-size: 14px;
+}
+</style>