mirror of
https://github.com/versia-pub/frontend.git
synced 2025-12-06 08:28:20 +01:00
59 lines
1.9 KiB
Vue
59 lines
1.9 KiB
Vue
|
<template>
|
||
|
|
<div class="max-w-7xl mx-auto my-12 px-4">
|
||
|
|
<div class="md:max-w-sm w-full relative mb-4">
|
||
|
|
<TextInput v-model="search" placeholder="Search" class="pl-8" />
|
||
|
|
<iconify-icon icon="tabler:search"
|
||
|
|
class="absolute size-4 top-1/2 left-2.5 transform -translate-y-1/2 text-gray-200" aria-hidden="true"
|
||
|
|
width="unset" />
|
||
|
|
</div>
|
||
|
|
<Category v-if="emojis.length > 0" v-for="([name, emojis]) in categories" :key="name" :emojis="emojis"
|
||
|
|
:name="name" />
|
||
|
|
<div v-else class="flex flex-col items-center justify-center gap-2 text-gray-200 text-center p-10">
|
||
|
|
<span class="text-lg font-semibold">No emojis found.</span>
|
||
|
|
<span class="text-sm">
|
||
|
|
You can ask your administrator to add some emojis.
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script lang="ts" setup>
|
||
|
|
import type { Emoji } from "@versia/client/types";
|
||
|
|
import TextInput from "~/components/inputs/text-input.vue";
|
||
|
|
import Category from "./category.vue";
|
||
|
|
|
||
|
|
const emojis = computed(() =>
|
||
|
|
(
|
||
|
|
(identity.value?.emojis as
|
||
|
|
| (Emoji & { id: string; global: boolean })[]
|
||
|
|
| undefined) ?? []
|
||
|
|
).filter((emoji) =>
|
||
|
|
emoji.shortcode.toLowerCase().includes(search.value.toLowerCase()),
|
||
|
|
),
|
||
|
|
);
|
||
|
|
const search = ref("");
|
||
|
|
|
||
|
|
const categories = computed(() => {
|
||
|
|
const categories = new Map<
|
||
|
|
string,
|
||
|
|
(Emoji & { id: string; global: boolean })[]
|
||
|
|
>();
|
||
|
|
for (const emoji of emojis.value) {
|
||
|
|
if (!emoji.category) {
|
||
|
|
if (!categories.has("Uncategorized")) {
|
||
|
|
categories.set("Uncategorized", []);
|
||
|
|
}
|
||
|
|
|
||
|
|
categories.get("Uncategorized")?.push(emoji);
|
||
|
|
continue;
|
||
|
|
}
|
||
|
|
|
||
|
|
if (!categories.has(emoji.category)) {
|
||
|
|
categories.set(emoji.category, []);
|
||
|
|
}
|
||
|
|
|
||
|
|
categories.get(emoji.category)?.push(emoji);
|
||
|
|
}
|
||
|
|
return categories;
|
||
|
|
});
|
||
|
|
</script>
|