c970f5b29f
- Added detailed labels to the deployment script for IndeedHub, including title, version, description, license, icon, and repository URL. - Updated package dependencies in package.json and package-lock.json, including upgrading 'nostr-tools' to version 2.23.0 and adding 'axios' and '@tanstack/vue-query'. - Improved README with a modern description of the platform and updated project structure details. This commit enhances the clarity of the deployment process and ensures the project is using the latest dependencies for better performance and features.
160 lines
4.2 KiB
Vue
160 lines
4.2 KiB
Vue
<template>
|
|
<Teleport to="body">
|
|
<div class="toast-container">
|
|
<TransitionGroup name="toast">
|
|
<div
|
|
v-for="toast in toasts"
|
|
:key="toast.id"
|
|
:class="['toast', `toast-${toast.type}`]"
|
|
>
|
|
<div class="toast-icon">
|
|
<!-- Success Icon -->
|
|
<svg v-if="toast.type === 'success'" class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
|
|
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
|
|
</svg>
|
|
|
|
<!-- Error Icon -->
|
|
<svg v-else-if="toast.type === 'error'" class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
|
|
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd" />
|
|
</svg>
|
|
|
|
<!-- Warning Icon -->
|
|
<svg v-else-if="toast.type === 'warning'" class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
|
|
<path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd" />
|
|
</svg>
|
|
|
|
<!-- Info Icon -->
|
|
<svg v-else class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
|
|
<path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd" />
|
|
</svg>
|
|
</div>
|
|
|
|
<div class="toast-message">{{ toast.message }}</div>
|
|
|
|
<button @click="removeToast(toast.id)" class="toast-close">
|
|
<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
|
|
<path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</TransitionGroup>
|
|
</div>
|
|
</Teleport>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { useToast } from '../composables/useToast'
|
|
|
|
const { toasts, removeToast } = useToast()
|
|
</script>
|
|
|
|
<style scoped>
|
|
.toast-container {
|
|
position: fixed;
|
|
top: 80px;
|
|
right: 16px;
|
|
z-index: 10000;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 12px;
|
|
max-width: 400px;
|
|
}
|
|
|
|
.toast {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
padding: 16px;
|
|
background: rgba(0, 0, 0, 0.75);
|
|
backdrop-filter: blur(24px);
|
|
-webkit-backdrop-filter: blur(24px);
|
|
border-radius: 12px;
|
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
box-shadow:
|
|
0 8px 24px rgba(0, 0, 0, 0.4),
|
|
inset 0 1px 0 rgba(255, 255, 255, 0.1);
|
|
min-width: 320px;
|
|
}
|
|
|
|
.toast-icon {
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.toast-success {
|
|
border-color: rgba(34, 197, 94, 0.3);
|
|
}
|
|
|
|
.toast-success .toast-icon {
|
|
color: #22c55e;
|
|
}
|
|
|
|
.toast-error {
|
|
border-color: rgba(239, 68, 68, 0.3);
|
|
}
|
|
|
|
.toast-error .toast-icon {
|
|
color: #ef4444;
|
|
}
|
|
|
|
.toast-warning {
|
|
border-color: rgba(251, 146, 60, 0.3);
|
|
}
|
|
|
|
.toast-warning .toast-icon {
|
|
color: #fb923c;
|
|
}
|
|
|
|
.toast-info {
|
|
border-color: rgba(59, 130, 246, 0.3);
|
|
}
|
|
|
|
.toast-info .toast-icon {
|
|
color: #3b82f6;
|
|
}
|
|
|
|
.toast-message {
|
|
flex: 1;
|
|
color: white;
|
|
font-size: 14px;
|
|
line-height: 1.4;
|
|
}
|
|
|
|
.toast-close {
|
|
flex-shrink: 0;
|
|
color: rgba(255, 255, 255, 0.6);
|
|
transition: color 0.2s;
|
|
}
|
|
|
|
.toast-close:hover {
|
|
color: rgba(255, 255, 255, 1);
|
|
}
|
|
|
|
/* Toast Transitions */
|
|
.toast-enter-active,
|
|
.toast-leave-active {
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.toast-enter-from {
|
|
transform: translateX(100%);
|
|
opacity: 0;
|
|
}
|
|
|
|
.toast-leave-to {
|
|
transform: translateX(100%);
|
|
opacity: 0;
|
|
}
|
|
|
|
@media (max-width: 640px) {
|
|
.toast-container {
|
|
left: 16px;
|
|
right: 16px;
|
|
max-width: none;
|
|
}
|
|
|
|
.toast {
|
|
min-width: 0;
|
|
}
|
|
}
|
|
</style>
|