mirror of
https://github.com/versia-pub/frontend.git
synced 2025-12-06 08:28:20 +01:00
35 lines
1.1 KiB
Vue
35 lines
1.1 KiB
Vue
<template>
|
|
<Collapsible :default-open="true">
|
|
<div class="grid grid-cols-[1fr_auto] gap-4 items-baseline">
|
|
<h2 class="text-2xl font-semibold tracking-tight">
|
|
{{ name }}
|
|
</h2>
|
|
<CollapsibleTrigger :as-child="true">
|
|
<Button size="icon" variant="outline" class="[&_svg]:data-[state=open]:-rotate-180">
|
|
<ChevronDown class="duration-200" />
|
|
</Button>
|
|
</CollapsibleTrigger>
|
|
</div>
|
|
<CollapsibleContent class="grid grid-cols-1 md:grid-cols-2 2xl:grid-cols-4 gap-3 mt-4">
|
|
<Emoji v-for="emoji in emojis" :key="emoji.id" :emoji="emoji" />
|
|
</CollapsibleContent>
|
|
</Collapsible>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import type { Emoji as EmojiType } from "@versia/client/types";
|
|
import { ChevronDown } from "lucide-vue-next";
|
|
import { Button } from "~/components/ui/button";
|
|
import {
|
|
Collapsible,
|
|
CollapsibleContent,
|
|
CollapsibleTrigger,
|
|
} from "~/components/ui/collapsible";
|
|
import Emoji from "./emoji.vue";
|
|
|
|
defineProps<{
|
|
emojis: EmojiType[];
|
|
name: string;
|
|
}>();
|
|
</script>
|