78 lines
2.2 KiB
Svelte
78 lines
2.2 KiB
Svelte
<script lang="ts">
|
|
import { scrollFadeUp, scrollStagger } from '$lib/gsap/actions';
|
|
|
|
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 use:scrollFadeUp={{ y: 20 }} class="mb-12 flex items-end justify-between">
|
|
<h2 class="font-display text-4xl font-black tracking-tighter uppercase">БЛОГ</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
|
|
use:scrollStagger={{ selector: 'a', stagger: 0.1, y: 32 }}
|
|
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 (post.slug)}
|
|
<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] tracking-widest text-zinc-600 uppercase">
|
|
{post.tags[0]}
|
|
</span>
|
|
{/if}
|
|
</div>
|
|
<h3
|
|
class="font-display text-[clamp(1.25rem,2.5vw,1.75rem)] leading-tight font-black tracking-tight"
|
|
>
|
|
{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}
|