50 lines
2.8 KiB
Vue
50 lines
2.8 KiB
Vue
<script setup>
|
|
import { Link } from '@inertiajs/vue3';
|
|
|
|
defineProps({
|
|
posts: { type: Array, default: () => [] },
|
|
indexUrl: { type: String, required: true },
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<section id="news" data-screen-label="04 News">
|
|
<div class="wrap">
|
|
<div class="section-head reveal">
|
|
<span class="eyebrow">Хроники сервера</span>
|
|
<div style="height: 20px"></div>
|
|
<h2 class="h-display" style="font-size: clamp(36px, 5vw, 60px)">Новости и патчноуты</h2>
|
|
<div class="divider-ornament">✦</div>
|
|
<Link class="news-all-link" :href="indexUrl">Все новости <span aria-hidden="true">→</span></Link>
|
|
</div>
|
|
|
|
<div v-if="posts.length" class="news-grid">
|
|
<Link
|
|
v-for="post in posts"
|
|
:key="post.id || post.title"
|
|
:href="post.url"
|
|
:aria-label="`Прочитать новость «${post.title}»`"
|
|
:class="['news-card', 'reveal', { featured: post.featured }]"
|
|
>
|
|
<div class="news-meta">
|
|
<span :class="['news-tag', post.tagType || 'patch']">{{ post.tag }}</span>
|
|
<span v-if="post.date">{{ post.date }}</span>
|
|
</div>
|
|
<div v-if="post.featured" class="news-placeholder" :style="post.image_url ? { backgroundImage: `url(${post.image_url})`, backgroundSize: 'cover', backgroundPosition: 'center', color: 'transparent' } : {}">
|
|
{{ post.image_url ? post.title : '[ placeholder ] · 1600x800' }}
|
|
</div>
|
|
<h3 class="news-title">{{ post.title }}</h3>
|
|
<p class="news-excerpt">{{ post.excerpt }}</p>
|
|
<span class="news-read">Читать полностью <span aria-hidden="true">→</span></span>
|
|
</Link>
|
|
</div>
|
|
|
|
<div v-else class="news-empty reveal" style="text-align: center; padding: 80px 24px; border: 1px dashed var(--panel-border-strong); border-radius: var(--radius); background: rgba(127, 184, 212, 0.02)">
|
|
<div style="font-size: 28px; color: var(--moon); margin-bottom: 14px">✦</div>
|
|
<h3 class="h-display" style="font-size: 24px; margin-bottom: 10px">Пока новостей нет</h3>
|
|
<p class="lead" style="font-style: italic; max-width: 520px; margin: 0 auto">Хроники сервера ещё не открыли первую страницу. Загляни позже — здесь появятся заметки об обновлениях, события и дневники разработки.</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</template>
|