39 lines
1.4 KiB
Vue
39 lines
1.4 KiB
Vue
<script setup>
|
|
defineProps({ fonts: Array })
|
|
|
|
function fontIcon(status) {
|
|
if (status === 'safe') return '✓'
|
|
if (status === 'professional') return '⚠'
|
|
return '◎'
|
|
}
|
|
|
|
function fontIconClass(status) {
|
|
if (status === 'safe') return 'text-green-500'
|
|
if (status === 'professional') return 'text-amber-500'
|
|
return 'text-gray-400'
|
|
}
|
|
|
|
function fontStatusText(font) {
|
|
if (font.status === 'safe') return 'Available in Word'
|
|
if (font.status === 'professional')
|
|
return `Install on client machine · If missing: Word uses ${font.substitute}`
|
|
return 'Unknown · Verify availability'
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div>
|
|
<h3 class="text-xs font-semibold text-gray-400 uppercase tracking-wider mb-3">Fonts</h3>
|
|
<div class="divide-y divide-gray-50">
|
|
<div v-for="font in fonts" :key="font.name" class="flex items-center gap-3 py-2.5">
|
|
<span :class="['text-sm w-4 text-center flex-shrink-0', fontIconClass(font.status)]">
|
|
{{ fontIcon(font.status) }}
|
|
</span>
|
|
<span class="text-sm font-medium text-gray-900 w-44 flex-shrink-0 truncate">{{ font.name }}</span>
|
|
<span class="text-xs text-gray-500 flex-1 min-w-0 truncate">{{ fontStatusText(font) }}</span>
|
|
<span v-if="font.usedFor" class="text-xs text-gray-400 font-mono hidden sm:block flex-shrink-0">{{ font.usedFor }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|