sbb45
72 lines
2.0 KiB
Svelte
72 lines
2.0 KiB
Svelte
<script lang="ts">
|
|
type Post = {
|
|
slug: string;
|
|
date: string;
|
|
title: string;
|
|
description: string;
|
|
tags?: string[];
|
|
};
|
|
|
|
let { posts = [] }: { posts: Post[] } = $props();
|
|
|
|
function fmtDate(d: string) {
|
|
try {
|
|
return new Intl.DateTimeFormat('ru', {
|
|
day: 'numeric',
|
|
month: 'short',
|
|
year: 'numeric'
|
|
}).format(new Date(d));
|
|
} catch {
|
|
return d;
|
|
}
|
|
}
|
|
</script>
|
|
|
|
{#if posts.length > 0}
|
|
<div class="border-b border-white/6">
|
|
<section class="px-5 py-24 sm:px-10 sm:py-32">
|
|
<div class="mb-12 flex items-end justify-between">
|
|
<h2 class="font-display text-4xl font-black uppercase tracking-tighter">БЛОГ</h2>
|
|
<a
|
|
href="/blog"
|
|
class="font-display text-[0.75rem] font-bold tracking-wider text-desc transition-colors duration-150 hover:text-white"
|
|
>
|
|
ВСЕ СТАТЬИ →
|
|
</a>
|
|
</div>
|
|
|
|
<div
|
|
class="grid grid-cols-1 overflow-hidden rounded-xl border border-white/6 sm:grid-cols-[repeat(auto-fit,minmax(20rem,1fr))]"
|
|
>
|
|
{#each posts as post, i}
|
|
<a
|
|
href="/blog/{post.slug}"
|
|
class="flex flex-col gap-5 p-10 no-underline transition-colors duration-150 hover:bg-white/2
|
|
{i > 0 ? 'border-t border-white/6 sm:border-t-0 sm:border-l' : ''}"
|
|
>
|
|
<div class="flex items-center justify-between">
|
|
<time datetime={post.date} class="font-mono text-[0.6875rem] tracking-widest text-zinc-600">
|
|
{fmtDate(post.date)}
|
|
</time>
|
|
{#if post.tags?.length}
|
|
<span class="font-mono text-[0.625rem] uppercase tracking-widest text-zinc-600">
|
|
{post.tags[0]}
|
|
</span>
|
|
{/if}
|
|
</div>
|
|
<h3
|
|
class="font-display font-black leading-tight tracking-tight text-[clamp(1.25rem,2.5vw,1.75rem)]"
|
|
>
|
|
{post.title}
|
|
</h3>
|
|
<p class="flex-1 text-sm leading-relaxed text-desc">{post.description}</p>
|
|
<span class="font-display text-[0.75rem] font-bold tracking-wider text-primary">
|
|
ЧИТАТЬ →
|
|
</span>
|
|
</a>
|
|
{/each}
|
|
</div>
|
|
</section>
|
|
</div>
|
|
{/if}
|