62 lines
2.2 KiB
Vue
62 lines
2.2 KiB
Vue
<script setup lang="ts">
|
|
import { t } from '@/i18n'
|
|
|
|
const emit = defineEmits<{
|
|
back: []
|
|
}>()
|
|
</script>
|
|
|
|
<template>
|
|
<div aria-busy="true" class="flex min-h-0 flex-1 flex-col lg:flex-row">
|
|
<div class="flex min-h-0 min-w-0 flex-1 flex-col">
|
|
<div
|
|
class="flex flex-shrink-0 items-center gap-2.5 border-b border-default bg-default px-6 py-3.5"
|
|
>
|
|
<UButton
|
|
icon="i-lucide-arrow-left"
|
|
color="neutral"
|
|
variant="ghost"
|
|
class="size-8 justify-center text-toned"
|
|
:aria-label="t('Back to Articles')"
|
|
@click="emit('back')"
|
|
/>
|
|
<USkeleton class="h-5 w-80 rounded-none" data-testid="skeleton-title" />
|
|
<USkeleton class="h-5.5 w-15 rounded-none" />
|
|
</div>
|
|
<div
|
|
class="min-h-0 max-w-168 flex-1 space-y-3.5 px-12 py-10"
|
|
data-testid="skeleton-content"
|
|
>
|
|
<USkeleton class="h-3.5 w-full rounded-none" />
|
|
<USkeleton class="h-3.5 w-11/12 rounded-none" />
|
|
<USkeleton class="h-3.5 w-4/5 rounded-none" />
|
|
<USkeleton class="mt-4.5 h-5.5 w-2/5 rounded-none" />
|
|
<USkeleton class="h-3.5 w-full rounded-none" />
|
|
<USkeleton class="h-3.5 w-3/4 rounded-none" />
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="w-70 flex-shrink-0 space-y-2.5 border-default p-5 lg:border-l"
|
|
data-testid="skeleton-details"
|
|
>
|
|
<div class="flex flex-col gap-3 border-b border-default pb-4">
|
|
<div class="flex min-h-6 items-center gap-2 text-highlighted">
|
|
<UIcon name="i-lucide-chevron-down" class="size-3.5 -rotate-90" />
|
|
<span class="text-sm font-semibold">{{ t('Site and authors') }}</span>
|
|
</div>
|
|
<USkeleton class="ml-5.5 h-3 w-2/5 rounded-none" data-testid="skeleton-meta" />
|
|
</div>
|
|
<div class="flex flex-col gap-3 border-b border-default pb-4">
|
|
<div class="flex min-h-6 items-center gap-2 text-highlighted">
|
|
<UIcon name="i-lucide-chevron-down" class="size-3.5 -rotate-90" />
|
|
<span class="text-sm font-semibold">{{ t('Search and sharing') }}</span>
|
|
</div>
|
|
<USkeleton class="ml-5.5 h-3 w-2/5 rounded-none" data-testid="skeleton-seo" />
|
|
</div>
|
|
<USkeleton class="h-3 w-full rounded-none" />
|
|
<USkeleton class="h-3 w-full rounded-none" />
|
|
<USkeleton class="h-3 w-3/5 rounded-none" />
|
|
</div>
|
|
</div>
|
|
</template>
|