58 lines
No EOL
1.3 KiB
Vue
58 lines
No EOL
1.3 KiB
Vue
<template>
|
||
<input id="search-friend-bar" placeholder="search"/>
|
||
|
||
<!-- we aren't checking for the "all" variant, since this is the default and fallback one -->
|
||
|
||
<p v-if="props.variant === 'online'" style="text-align: left;">Online – 0</p>
|
||
<p v-else-if="props.variant === 'pending'" style="text-align: left;">Friend Requests – 0</p>
|
||
<p v-else style="text-align: left;">Friends – {{ friends?.length || 0 }}</p>
|
||
|
||
<div id="friends-list">
|
||
<div v-if="props.variant === 'online'">
|
||
Not Implemented
|
||
</div>
|
||
|
||
<div v-else-if="props.variant === 'pending'">
|
||
Not Implemented
|
||
</div>
|
||
|
||
<div v-else>
|
||
<UserEntry v-for="user of friends" :user="user" :name="getDisplayName(user)"
|
||
:href="`/me/${user.uuid}`"/>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script lang="ts" setup>
|
||
const { fetchFriends } = useApi();
|
||
|
||
const friends = sortUsers(await fetchFriends())
|
||
|
||
const props = defineProps<{
|
||
variant: string
|
||
}>();
|
||
</script>
|
||
|
||
<style>
|
||
#search-friend-bar {
|
||
text-align: left;
|
||
margin-top: .8em;
|
||
padding: .3em .5em;
|
||
width: 100%;
|
||
|
||
border-radius: 1em;
|
||
border: 1px solid var(--accent-color);
|
||
|
||
box-sizing: border-box;
|
||
|
||
color: inherit;
|
||
background-color: unset;
|
||
font-weight: medium;
|
||
letter-spacing: .04em;
|
||
}
|
||
|
||
#search-friend-bar:empty:before {
|
||
content: attr(placeholder);
|
||
color: gray;
|
||
}
|
||
</style> |