79 lines
2.5 KiB
Vue
79 lines
2.5 KiB
Vue
|
<template>
|
||
|
|
<div
|
||
|
|
class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5 mb-8 transition-opacity duration-300"
|
||
|
|
:class="{ 'opacity-0 pointer-events-none': !show }"
|
||
|
|
>
|
||
|
|
<RouterLink
|
||
|
|
v-for="(goal, idx) in goals"
|
||
|
|
:key="goal.id"
|
||
|
|
:to="`/dashboard/goals/${goal.id}`"
|
||
|
|
class="goal-card glass-card p-6 block"
|
||
|
|
:class="{ 'home-card-animate': animate }"
|
||
|
|
:style="{ '--card-stagger': idx }"
|
||
|
|
>
|
||
|
|
<div class="flex items-start justify-between mb-4">
|
||
|
|
<div class="w-10 h-10 rounded-xl bg-white/10 flex items-center justify-center shrink-0">
|
||
|
|
<span class="text-xl">{{ goalIcon(goal.icon) }}</span>
|
||
|
|
</div>
|
||
|
|
<span class="goal-status-badge" :class="statusBadgeClass(goal.id)">
|
||
|
|
<span v-if="goalStatuses[goal.id] === 'completed'" class="w-1.5 h-1.5 rounded-full bg-green-400"></span>
|
||
|
|
<span v-else-if="goalStatuses[goal.id] === 'in-progress'" class="w-1.5 h-1.5 rounded-full bg-orange-400"></span>
|
||
|
|
{{ statusLabel(goal.id) }}
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<h3 class="text-lg font-semibold text-white mb-1">{{ goal.title }}</h3>
|
||
|
|
<p class="text-sm text-white/55 mb-4 leading-relaxed">{{ goal.subtitle }}</p>
|
||
|
|
|
||
|
|
<div class="flex items-center justify-between">
|
||
|
|
<span class="text-xs text-white/40">{{ goal.estimatedTime }}</span>
|
||
|
|
<span class="text-xs text-white/50 flex items-center gap-1">
|
||
|
|
{{ goal.difficulty === 'beginner' ? 'Beginner' : 'Intermediate' }}
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
</RouterLink>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup lang="ts">
|
||
|
|
import { RouterLink } from 'vue-router'
|
||
|
|
import { GOALS } from '@/data/goals'
|
||
|
|
import { useGoalStore } from '@/stores/goals'
|
||
|
|
|
||
|
|
defineProps<{
|
||
|
|
show: boolean
|
||
|
|
animate: boolean
|
||
|
|
}>()
|
||
|
|
|
||
|
|
const goalStore = useGoalStore()
|
||
|
|
const goals = GOALS
|
||
|
|
const goalStatuses = goalStore.goalStatuses
|
||
|
|
|
||
|
|
function goalIcon(icon: string): string {
|
||
|
|
const icons: Record<string, string> = {
|
||
|
|
shop: '🏪',
|
||
|
|
payments: '⚡',
|
||
|
|
photos: '📸',
|
||
|
|
files: '📁',
|
||
|
|
lightning: '⚡',
|
||
|
|
identity: '🔑',
|
||
|
|
backup: '💾',
|
||
|
|
}
|
||
|
|
return icons[icon] || '📦'
|
||
|
|
}
|
||
|
|
|
||
|
|
function statusLabel(goalId: string): string {
|
||
|
|
const status = goalStatuses[goalId]
|
||
|
|
if (status === 'completed') return 'Done'
|
||
|
|
if (status === 'in-progress') return 'In Progress'
|
||
|
|
return 'Start'
|
||
|
|
}
|
||
|
|
|
||
|
|
function statusBadgeClass(goalId: string): string {
|
||
|
|
const status = goalStatuses[goalId]
|
||
|
|
if (status === 'completed') return 'goal-status-badge-completed'
|
||
|
|
if (status === 'in-progress') return 'goal-status-badge-in-progress'
|
||
|
|
return 'goal-status-badge-not-started'
|
||
|
|
}
|
||
|
|
</script>
|