new components

nginx/vue/src/components/util/Chat.vue

@@ -1,4 +1,5 @@
 <script setup>
+import Button from "@/components/input/Button.vue";
 import { useMessagesStore } from "@/stores/messages";
 
 const messagesStore = useMessagesStore();
@@ -21,7 +22,7 @@ onUnmounted(() => {
         </div>
         <div class="flex flex-row">
             <input v-model="messageInput" @keyup.enter="sendMessage" />
-            <button @click="sendMessage">Send</button>
+            <Button @click="sendMessage">Send</Button>
         </div>
     </div>
 </template>

nginx/vue/src/components/util/LinkTable.vue

@@ -12,13 +12,8 @@ const keys = ["name", "link"];
 </script>
 
 <template>
-    <a
-        class="bdr-2 bg-bg_primary"
-        v-for="(row, rowIndex) in linkArr"
-        :key="rowIndex"
-        :href="row.link"
-    >
-        <p>
+    <a v-for="(row, rowIndex) in linkArr" :key="rowIndex" :href="row.link">
+        <p class="bdr-2 bg-bg_primary">
             {{ row.name }}
         </p>
     </a>

nginx/vue/src/components/util/MusicPlayer.vue

@@ -1,4 +1,5 @@
 <script setup>
+import Button from "@/components/input/Button.vue";
 
 </script>
 

nginx/vue/src/components/util/Timer.vue

@@ -1,4 +1,5 @@
 <script setup>
+import Button from "@/components/input/Button.vue";
 import { ref } from "vue";
 
 const timer = ref(null);
@@ -87,15 +88,15 @@ function playFinishedSound() {
                 />
                 <p>{{ secondsInput }}s</p>
             </div>
-            <button @click="startTimer">Proceed</button>
+            <Button @click="startTimer">Proceed</Button>
         </div>
         <div v-if="finished && !paused" class="flex flex-col">
             <h1>Timer finished!</h1>
-            <button @click="resetTimer">Reset</button>
+            <Button @click="resetTimer">Reset</Button>
         </div>
         <div v-if="!finished && paused" class="flex flex-col">
             <h1>Paused</h1>
-            <button @click="resetTimer">Reset</button>
+            <Button @click="resetTimer">Reset</Button>
         </div>
         <div v-if="!finished && !paused" class="flex flex-col">
             <p>
@@ -108,7 +109,7 @@ function playFinishedSound() {
                     secondsInput.toString().padStart(2, "0")
                 }}
             </p>
-            <button @click="pauseTimer">Pause</button>
+            <Button @click="pauseTimer">Pause</Button>
         </div>
     </div>
 </template>

nginx/vue/src/components/util/ToggleLinkTable.vue

@@ -1,4 +1,6 @@
 <script setup>
+import ToggleHeader from "@/components/text/ToggleHeader.vue";
+
 import { ref } from "vue";
 import LinkTable from "@/components/util/LinkTable.vue";
 
@@ -17,9 +19,10 @@ const show_links = ref(false);
 </script>
 
 <template>
-    <div class="flex flex-row">
-        <h2>{{ title }}</h2>
-        <button @click="show_links = !show_links">Toggle</button>
+    <div class="h-fit w-fit">
+        <ToggleHeader v-model="show_links" class="justify-between flex"
+            >{{ title }}
+        </ToggleHeader>
+        <LinkTable v-if="show_links" :linkArr="props.linkArr" />
     </div>
-    <LinkTable v-if="show_links" :linkArr="props.linkArr" />
 </template>