webapp/src/pages/Support.vue
2025-02-16 11:00:41 +01:00

54 lines
1 KiB
Vue

<script setup lang="ts">
import { useNostrStore } from '@/stores/nostr'
import SupportChat from '@/components/SupportChat.vue'
import Login from '@/components/Login.vue'
const nostrStore = useNostrStore()
</script>
<template>
<div class="container max-w-4xl mx-auto h-[calc(100vh-4rem)] py-4 px-4 sm:px-6 lg:px-8">
<div class="h-full">
<div class="h-full animate-in fade-in-50 slide-in-from-bottom-3">
<Login v-if="!nostrStore.isLoggedIn" />
<SupportChat v-else />
</div>
</div>
</div>
</template>
<style scoped>
.animate-in {
animation-duration: 0.3s;
animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
animation-fill-mode: forwards;
}
.fade-in-50 {
animation-name: fade-in-50;
}
.slide-in-from-bottom-3 {
animation-name: slide-in-from-bottom-3;
}
@keyframes fade-in-50 {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes slide-in-from-bottom-3 {
from {
transform: translateY(3px);
}
to {
transform: translateY(0);
}
}
</style>