feat : working UI for words

2024-12-29 19:34:26 +01:00
parent d49813e776
commit 3830ea84c8
23 changed files with 441 additions and 129 deletions
@@ -0,0 +1,33 @@
+<script setup lang="ts">
+
+import { useWordStore } from '~/store/word.store';
+
+const wordStore = useWordStore();
+
+await wordStore.fetchWordList()
+</script>
+
+<template>
+  <div id="words">
+    <div class="header">
+      <span>Word</span>
+      <span>Status</span>
+      <span>Submitter</span>
+    </div>
+    <Word v-for="word in wordStore.words" :word="word" />
+  </div>
+
+</template>
+
+<style lang="css" scoped>
+div#words {
+  display: grid;
+  grid-template-columns: 1fr;
+}
+
+div.header {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  align-items: center;
+}
+</style>