b19c7875a4
Changed dashboard.addBalance to dashboard.addBalanceWithCode to match the existing translation key in locale files.
62 lines
3.2 KiB
Vue
62 lines
3.2 KiB
Vue
<template>
|
|
<div class="card">
|
|
<div class="border-b border-gray-100 px-6 py-4 dark:border-dark-700">
|
|
<h2 class="text-lg font-semibold text-gray-900 dark:text-white">{{ t('dashboard.quickActions') }}</h2>
|
|
</div>
|
|
<div class="space-y-3 p-4">
|
|
<button @click="router.push('/keys')" class="group flex w-full items-center gap-4 rounded-xl bg-gray-50 p-4 text-left transition-all duration-200 hover:bg-gray-100 dark:bg-dark-800/50 dark:hover:bg-dark-800">
|
|
<div class="flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-xl bg-primary-100 transition-transform group-hover:scale-105 dark:bg-primary-900/30">
|
|
<Icon name="key" size="lg" class="text-primary-600 dark:text-primary-400" />
|
|
</div>
|
|
<div class="min-w-0 flex-1">
|
|
<p class="text-sm font-medium text-gray-900 dark:text-white">{{ t('dashboard.createApiKey') }}</p>
|
|
<p class="text-xs text-gray-500 dark:text-dark-400">{{ t('dashboard.generateNewKey') }}</p>
|
|
</div>
|
|
<Icon
|
|
name="chevronRight"
|
|
size="md"
|
|
class="text-gray-400 transition-colors group-hover:text-primary-500 dark:text-dark-500"
|
|
/>
|
|
</button>
|
|
|
|
<button @click="router.push('/usage')" class="group flex w-full items-center gap-4 rounded-xl bg-gray-50 p-4 text-left transition-all duration-200 hover:bg-gray-100 dark:bg-dark-800/50 dark:hover:bg-dark-800">
|
|
<div class="flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-xl bg-emerald-100 transition-transform group-hover:scale-105 dark:bg-emerald-900/30">
|
|
<Icon name="chart" size="lg" class="text-emerald-600 dark:text-emerald-400" />
|
|
</div>
|
|
<div class="min-w-0 flex-1">
|
|
<p class="text-sm font-medium text-gray-900 dark:text-white">{{ t('dashboard.viewUsage') }}</p>
|
|
<p class="text-xs text-gray-500 dark:text-dark-400">{{ t('dashboard.checkDetailedLogs') }}</p>
|
|
</div>
|
|
<Icon
|
|
name="chevronRight"
|
|
size="md"
|
|
class="text-gray-400 transition-colors group-hover:text-emerald-500 dark:text-dark-500"
|
|
/>
|
|
</button>
|
|
|
|
<button @click="router.push('/redeem')" class="group flex w-full items-center gap-4 rounded-xl bg-gray-50 p-4 text-left transition-all duration-200 hover:bg-gray-100 dark:bg-dark-800/50 dark:hover:bg-dark-800">
|
|
<div class="flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-xl bg-amber-100 transition-transform group-hover:scale-105 dark:bg-amber-900/30">
|
|
<Icon name="gift" size="lg" class="text-amber-600 dark:text-amber-400" />
|
|
</div>
|
|
<div class="min-w-0 flex-1">
|
|
<p class="text-sm font-medium text-gray-900 dark:text-white">{{ t('dashboard.redeemCode') }}</p>
|
|
<p class="text-xs text-gray-500 dark:text-dark-400">{{ t('dashboard.addBalanceWithCode') }}</p>
|
|
</div>
|
|
<Icon
|
|
name="chevronRight"
|
|
size="md"
|
|
class="text-gray-400 transition-colors group-hover:text-amber-500 dark:text-dark-500"
|
|
/>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { useRouter } from 'vue-router'
|
|
import { useI18n } from 'vue-i18n'
|
|
import Icon from '@/components/icons/Icon.vue'
|
|
const router = useRouter()
|
|
const { t } = useI18n()
|
|
</script>
|