главная страница

2026-05-22 15:16:04 +05:00
parent 5929d5862f
commit 8bda936c4b
22 changed files with 872 additions and 5 deletions
@@ -0,0 +1,71 @@
+<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}