add change language

src/routes/overview/components/QuickActions.vue

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import { computed } from 'vue';
+import { useI18n } from 'vue-i18n';
 import Chart from '@/components/icons/Chart.vue';
 import Credit from '@/components/icons/Credit.vue';
 import Upload from '@/components/icons/Upload.vue';
@@ -6,6 +8,7 @@ import Video from '@/components/icons/Video.vue';
 import { useUIState } from '@/stores/uiState';
 import { useRouter } from 'vue-router';
 import Referral from './Referral.vue';
+
 interface Props {
     loading: boolean;
 }
@@ -14,33 +17,34 @@ defineProps<Props>();
 
 const uiState = useUIState();
 const router = useRouter();
+const { t } = useI18n();
 
-const quickActions = [
+const quickActions = computed(() => [
     {
-        title: 'Upload Video',
-        description: 'Upload a new video to your library',
+        title: t('overview.quickActions.uploadVideo.title'),
+        description: t('overview.quickActions.uploadVideo.description'),
         icon: Upload,
         onClick: () => uiState.toggleUploadDialog()
     },
     {
-        title: 'Video Library',
-        description: 'Browse all your videos',
+        title: t('overview.quickActions.videoLibrary.title'),
+        description: t('overview.quickActions.videoLibrary.description'),
         icon: Video,
         onClick: () => router.push('/video')
     },
     {
-        title: 'Analytics',
-        description: 'Track performance & insights',
+        title: t('overview.quickActions.analytics.title'),
+        description: t('overview.quickActions.analytics.description'),
         icon: Chart,
         onClick: () => { }
     },
     {
-        title: 'Manage Plan',
-        description: 'Upgrade or change your plan',
+        title: t('overview.quickActions.managePlan.title'),
+        description: t('overview.quickActions.managePlan.description'),
         icon: Credit,
         onClick: () => router.push('/payments-and-plans')
     },
-];
+]);
 </script>
 
 <template>
@@ -63,7 +67,7 @@ const quickActions = [
     </div>
 
     <div v-else class="mb-8">
-        <h2 class="text-xl font-semibold mb-4">Quick Actions</h2>
+        <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="[