lethdat
b435638774
- Updated `hard-drive.vue` and `shield-user.vue` icons to use `currentColor` for better color management. - Enhanced `BaseTable.vue` to support skeleton loading rows and improved loading state rendering. - Refactored notification components to use new icon components (`Inbox`, `Video`, `Credit`, `BellOff`, `BellDot`) instead of icon classes. - Added new icons for `BellDot` and `BellOff`. - Improved the `QuickActions.vue` component for better hover effects. - Updated various settings components to use consistent icon styling and improved accessibility. - Refactored `AdsVastTable.tsx`, `DangerZone.vue`, `DomainsDnsTable.vue`, `PlayerConfigsTable.vue`, and `PopupAdsTable.tsx` to streamline loading states and skeleton rendering.
90 lines
3.7 KiB
Vue
90 lines
3.7 KiB
Vue
<script setup lang="ts">
|
|
import Chart from '@/components/icons/Chart.vue';
|
|
import Credit from '@/components/icons/Credit.vue';
|
|
import Upload from '@/components/icons/Upload.vue';
|
|
import Video from '@/components/icons/Video.vue';
|
|
import { useUIState } from '@/stores/uiState';
|
|
import { useTranslation } from 'i18next-vue';
|
|
import { computed } from 'vue';
|
|
import { useRouter } from 'vue-router';
|
|
import Referral from './Referral.vue';
|
|
|
|
interface Props {
|
|
loading: boolean;
|
|
}
|
|
|
|
defineProps<Props>();
|
|
|
|
const uiState = useUIState();
|
|
const router = useRouter();
|
|
const { t } = useTranslation();
|
|
|
|
const quickActions = computed(() => [
|
|
{
|
|
title: t('overview.quickActions.uploadVideo.title'),
|
|
description: t('overview.quickActions.uploadVideo.description'),
|
|
icon: Upload,
|
|
onClick: () => uiState.toggleUploadDialog()
|
|
},
|
|
{
|
|
title: t('overview.quickActions.videoLibrary.title'),
|
|
description: t('overview.quickActions.videoLibrary.description'),
|
|
icon: Video,
|
|
onClick: () => router.push('/videos')
|
|
},
|
|
{
|
|
title: t('overview.quickActions.analytics.title'),
|
|
description: t('overview.quickActions.analytics.description'),
|
|
icon: Chart,
|
|
onClick: () => { }
|
|
},
|
|
{
|
|
title: t('overview.quickActions.managePlan.title'),
|
|
description: t('overview.quickActions.managePlan.description'),
|
|
icon: Credit,
|
|
onClick: () => router.push('/settings/billing')
|
|
},
|
|
]);
|
|
</script>
|
|
|
|
<template>
|
|
<div v-if="loading" class="mb-8">
|
|
<div class="w-40 h-6 bg-gray-200 rounded animate-pulse mb-4" />
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
|
|
<div v-for="i in 4" :key="i" class="p-6 rounded-xl border border-gray-200">
|
|
<div class="w-12 h-12 bg-gray-200 rounded-full animate-pulse mb-4" />
|
|
<div class="w-32 h-5 bg-gray-200 rounded animate-pulse mb-2" />
|
|
<div class="w-full h-4 bg-gray-200 rounded animate-pulse" />
|
|
</div>
|
|
</div>
|
|
<div class="flex flex-col justify-between p-6 rounded-xl border border-gray-200">
|
|
<div class="w-40 h-8 bg-gray-200 rounded animate-pulse" />
|
|
<div class="w-full h-5 bg-gray-200 rounded animate-pulse my-4" />
|
|
<div class="w-full h-4 bg-gray-200 rounded animate-pulse" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div v-else class="mb-8">
|
|
<h2 class="text-xl font-semibold mb-4">{{ t('overview.quickActions.title') }}</h2>
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
|
|
<button v-for="action in quickActions" :key="action.title" @click="action.onClick" :class="[
|
|
'p-6 rounded-xl text-left transition-all duration-200 flex flex-col bg-header',
|
|
'border border-gray-300 hover:border-primary hover:shadow-lg',
|
|
'group press-animated',
|
|
]">
|
|
<div
|
|
class="w-12 h-12 rounded-lg flex items-center justify-center mb-4 bg-muted-dark group-hover:(bg-primary/10 text-primary) transition-colors">
|
|
<component filled :is="action.icon" class="w-6 h-6" />
|
|
</div>
|
|
<h3 class="font-semibold mb-1 group-hover:text-primary transition-colors">{{ action.title }}</h3>
|
|
<p class="text-sm text-gray-600">{{ action.description }}</p>
|
|
</button>
|
|
</div>
|
|
<Referral />
|
|
</div>
|
|
</div>
|
|
</template>
|