gorb/frontend
4
0
Fork 0
Code Issues 6 Pull requests 2 Projects Releases Packages 1 Wiki Activity Actions

feat: Use actual server icons instead of placeholder #6

Merged
justtemmie merged 1 commit from server-icons into main 2025-07-03 16:44:05 +00:00
Conversation 1 Commits 1 Files changed 1 +7 -43
1 changed files with 7 additions and 43 deletions
Download patch file Download diff file Expand all files Collapse all files

50
layouts/client.vue
View file

@ -12,7 +12,8 @@
</NuxtLink> </NuxtLink>
<div id="servers-list"> <div id="servers-list">
<NuxtLink v-for="guild of guilds" :href="`/servers/${guild.uuid}`"> <NuxtLink v-for="guild of guilds" :href="`/servers/${guild.uuid}`">
<Icon name="lucide:server" class="white" size="2rem" /> <img v-if="guild.icon" class="server-icon" :src="guild.icon" :alt="guild.name"/>
<Icon v-else name="lucide:server" class="server-icon white" :alt="guild.name" />
</NuxtLink> </NuxtLink>
</div> </div>
</div> </div>
@ -26,48 +27,6 @@ import type { GuildResponse } from '~/types/interfaces';
const loading = useState("loading", () => false); const loading = useState("loading", () => false);
const guilds: GuildResponse[] | undefined = await fetchWithApi("/me/guilds"); const guilds: GuildResponse[] | undefined = await fetchWithApi("/me/guilds");
//const servers = await fetchWithApi("/servers") as { uuid: string, name: string, description: string }[];
//console.log("servers:", servers);
const members = [
{
id: "3287484395",
displayName: "SauceyRed"
},
{
id: "3287484395",
displayName: "SauceyRed"
},
{
id: "3287484395",
displayName: "SauceyRed"
},
{
id: "3287484395",
displayName: "SauceyRed"
},
{
id: "3287484395",
displayName: "SauceyRed"
},
{
id: "3287484395",
displayName: "SauceyRed"
},
{
id: "3287484395",
displayName: "SauceyRed"
},
{
id: "3287484395",
displayName: "SauceyRed"
},
{
id: "3287484395",
displayName: "SauceyRed"
}
];
</script> </script>
<style> <style>
@ -118,6 +77,11 @@ const members = [
padding-right: .5dvw; padding-right: .5dvw;
} }
.server-icon {
width: 3rem;
height: 3rem;
}
#current-info { #current-info {
grid-column: 2; grid-column: 2;
grid-row: 1; grid-row: 1;