new looks

nginx/vue/src/components/api/Login.vue

@@ -0,0 +1,19 @@
+<template>
+    <div v-if="loggedIn">
+        <h1>login</h1>
+    </div>
+</template>
+
+<script>
+import { ref, onMounted } from "vue";
+export default {
+    name: "api-login",
+    setup() {
+        const loggedIn = ref(false);
+        onMounted(() => {
+            loggedIn.value = true;
+        });
+        return { loggedIn };
+    },
+};
+</script>

nginx/vue/src/components/api/Posts.vue

@@ -0,0 +1,32 @@
+<template>
+    <!-- Input post display -->
+    <div v-if="posting"></div>
+    <!-- View post display -->
+    <div v-else>
+        <div v-for="(post, idx) in posts" :key="post.id || idx">
+            <h1>post info</h1>
+        </div>
+    </div>
+</template>
+
+<script>
+import { ref, onMounted } from "vue";
+export default {
+    name: "api-posts",
+    setup() {
+        const posting = ref(false);
+        const posts = ref([]);
+
+        async function fetchRecent() {}
+
+        onMounted(() => {
+            fetchRecent();
+            setInterval(fetchRecent, 120000);
+        });
+        return {
+            posting,
+            posts,
+        };
+    },
+};
+</script>

nginx/vue/src/components/spotify/Recent.vue

@@ -1,7 +1,8 @@
 <template>
     <h2 class="center-content">Listening to RECENTLY</h2>
-    <div class="flex-row">
+    <div v-if="fetched" class="flex-row">
         <div
+            v-if="fetched"
             v-for="(song, idx) in played"
             :key="song.track.id || idx"
             class="bg-white border2 shadow1"
@@ -12,6 +13,20 @@
             <p><strong>Artist:</strong> {{ song.track.artists[0].name }}</p>
         </div>
     </div>
+    <div v-else class="flex-row">
+        <div class="bg-white border2 shadow1 tile1">
+            <img src="/img/Untitled.png" />
+            <p>I ain't listenin to nofin rn :/</p>
+        </div>
+        <div class="bg-white border2 shadow1 tile1">
+            <img src="/img/Untitled.png" />
+            <p>I ain't listenin to nofin rn :/</p>
+        </div>
+        <div class="bg-white border2 shadow1 tile1">
+            <img src="/img/Untitled.png" />
+            <p>I ain't listenin to nofin rn :/</p>
+        </div>
+    </div>
 </template>
 
 <script>
@@ -21,12 +36,14 @@ export default {
     name: "spotify-recent",
     setup() {
         const played = ref([]);
+        const fetched = ref(false);
 
         async function fetchRecent() {
             try {
                 const res = await fetch("/api/spotify/recent");
                 if (!res.ok) throw new Error("Failed to fetch Spotify data");
                 played.value = await res.json();
+                fetched.value = true;
             } catch (err) {
                 console.error(err);
             }
@@ -39,6 +56,7 @@ export default {
 
         return {
             played,
+            fetched,
         };
     },
 };

nginx/vue/src/views/Home.vue

@@ -62,5 +62,13 @@ import Radio from "@/components/Radio.vue";
         <div class="border1 tile1">
             <SpotifyListening class="border2 bg-white shadow1 fill" />
         </div>
+
+        <div class="border1 tile1">
+            <Posts />
+        </div>
+
+        <div class="border1 tile1">
+            <Login />
+        </div>
     </main>
 </template>