Fergus Molloy
2914abbcd0
Some checks failed
Backend Actions / check (push) Successful in 2m27s
Backend Actions / test (push) Failing after 2m37s
Backend Actions / build (push) Successful in 3m46s
Frontend Actions / check (push) Successful in 1m24s
Frontend Actions / build (push) Successful in 1m22s
Frontend Actions / test (push) Successful in 46s
39 lines
880 B
Vue
39 lines
880 B
Vue
<template>
|
|
<div class="h-full border-2 border-sky-300 flex flex-col p-4 bg-gray-50">
|
|
<h2 class="text-lg font-semibold text-gray-800 mb-4">Servers</h2>
|
|
<div class="space-y-2">
|
|
<ServerLink
|
|
v-for="server in serversWithFallback"
|
|
:id="server.id"
|
|
:key="server.id"
|
|
class="text-gray-700 hover:text-sky-800"
|
|
>
|
|
{{ server.name }}
|
|
</ServerLink>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
interface Server {
|
|
id: string;
|
|
name: string;
|
|
}
|
|
|
|
const { data: servers, error } = await useFetch<Server[]>("/api/servers");
|
|
|
|
if (error.value) {
|
|
console.error("Failed to fetch servers:", error.value);
|
|
}
|
|
|
|
const serversWithFallback = computed(() => {
|
|
return (
|
|
servers.value || [
|
|
{ id: "1", name: "General" },
|
|
{ id: "2", name: "Gaming" },
|
|
{ id: "3", name: "Tech Talk" },
|
|
]
|
|
);
|
|
});
|
|
</script>
|