57 lines
2.2 KiB
Vue
57 lines
2.2 KiB
Vue
<template>
|
|
<div
|
|
class="bg-white dark:bg-gray-900 rounded-2xl shadow-lg border border-gray-100 dark:border-gray-800"
|
|
:class="compact ? 'p-4 flex-1 min-w-0' : 'p-5'"
|
|
>
|
|
<div :class="compact ? 'flex items-center gap-2 mb-3' : 'flex items-center gap-3 mb-4'">
|
|
<div
|
|
class="bg-linear-to-br from-success-400 to-success-500 flex items-center justify-center shrink-0"
|
|
:class="compact ? 'w-8 h-8 rounded-lg' : 'w-10 h-10 rounded-xl'"
|
|
>
|
|
<UIcon name="i-lucide-check-circle" :class="compact ? 'w-4 h-4' : 'w-5 h-5'" class="text-white" />
|
|
</div>
|
|
<div class="min-w-0">
|
|
<p
|
|
class="font-semibold text-gray-900 dark:text-white"
|
|
:class="compact ? 'text-xs truncate' : 'text-sm'"
|
|
>
|
|
{{ $t('hero.cards.completedTitle') }}
|
|
</p>
|
|
<p class="text-xs text-gray-500 dark:text-gray-400">
|
|
{{ $t('hero.cards.lastWeek') }}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div :class="compact ? 'space-y-1.5' : 'space-y-2'">
|
|
<div
|
|
class="flex items-center justify-between bg-success-50 dark:bg-success-900/30"
|
|
:class="compact ? 'p-1.5 rounded' : 'p-2 rounded-lg'"
|
|
>
|
|
<span class="text-xs text-gray-700 dark:text-gray-200 truncate">SAP S/4HANA</span>
|
|
<UIcon name="i-lucide-check" :class="compact ? 'w-3 h-3' : 'w-4 h-4'" class="text-success-500 shrink-0" />
|
|
</div>
|
|
<div
|
|
class="flex items-center justify-between bg-success-50 dark:bg-success-900/30"
|
|
:class="compact ? 'p-1.5 rounded' : 'p-2 rounded-lg'"
|
|
>
|
|
<span class="text-xs text-gray-700 dark:text-gray-200 truncate">Workday HCM</span>
|
|
<UIcon name="i-lucide-check" :class="compact ? 'w-3 h-3' : 'w-4 h-4'" class="text-success-500 shrink-0" />
|
|
</div>
|
|
<!-- Desktop-only: Salesforce item -->
|
|
<div v-if="!compact" class="flex items-center justify-between p-2 rounded-lg bg-success-50 dark:bg-success-900/30">
|
|
<span class="text-xs text-gray-700 dark:text-gray-200">Salesforce CRM</span>
|
|
<UIcon name="i-lucide-check" class="w-4 h-4 text-success-500" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
useI18n({ useScope: 'global' })
|
|
|
|
defineProps<{
|
|
compact?: boolean
|
|
}>()
|
|
</script>
|
|
|