53 lines
1.4 KiB
Vue
53 lines
1.4 KiB
Vue
<script setup lang="ts">
|
|
import { t } from '@/i18n'
|
|
|
|
import { computed } from 'vue'
|
|
|
|
const links = computed(() => [
|
|
{
|
|
to: '/settings/media/variants',
|
|
icon: 'i-lucide-layers',
|
|
label: t('Manage image variants'),
|
|
hint: t('Named sizes requested with ?v='),
|
|
},
|
|
{
|
|
to: '/settings/media/cache',
|
|
icon: 'i-lucide-database',
|
|
label: t('Cache usage'),
|
|
hint: t('Generated images and disk space'),
|
|
},
|
|
])
|
|
</script>
|
|
|
|
<template>
|
|
<section
|
|
aria-labelledby="media-links-h"
|
|
data-testid="media-links-card"
|
|
class="flex flex-col gap-3 border border-default bg-default p-4 lg:p-5"
|
|
>
|
|
<div class="flex flex-col gap-0.5">
|
|
<h2 id="media-links-h" class="text-[0.9375rem]/6 font-semibold text-highlighted">
|
|
{{ t('Media') }}
|
|
</h2>
|
|
<p class="text-pretty text-muted">
|
|
{{ t('Image sizes, cache and cleanup for your media library.') }}
|
|
</p>
|
|
</div>
|
|
<div class="flex flex-col">
|
|
<RouterLink
|
|
v-for="link in links"
|
|
:key="link.to"
|
|
:to="link.to"
|
|
class="flex min-h-11 items-center gap-3 border-t border-default py-2 text-highlighted focus-visible:outline-2 focus-visible:outline-primary"
|
|
>
|
|
<UIcon :name="link.icon" class="size-4 shrink-0" />
|
|
<span class="flex min-w-0 flex-1 flex-col">
|
|
<span class="font-medium">{{ link.label }}</span>
|
|
<span class="text-muted">{{ link.hint }}</span>
|
|
</span>
|
|
<UIcon name="i-lucide-chevron-right" class="size-3.5 shrink-0" />
|
|
</RouterLink>
|
|
</div>
|
|
</section>
|
|
</template>
|