92 lines
No EOL
3.3 KiB
Text
92 lines
No EOL
3.3 KiB
Text
---
|
||
import type { Post } from '@globalInterfaces';
|
||
|
||
interface Props {
|
||
posts: Post[];
|
||
}
|
||
|
||
const { posts } = Astro.props;
|
||
|
||
function formatDate(date: string): string {
|
||
if (!date) return '';
|
||
return new Date(date).toLocaleString('ru-RU', {
|
||
year: 'numeric',
|
||
month: 'long',
|
||
day: 'numeric',
|
||
});
|
||
}
|
||
---
|
||
|
||
{
|
||
posts.map((post) => {
|
||
const postLink = `/blog/${post.slug}`;
|
||
const formattedDate = formatDate(post.publishDate);
|
||
const displayTitle = post.title.replace('{year}', new Date().getFullYear().toString());
|
||
|
||
return (
|
||
<div class="relative p-6 md:p-7 rounded-2xl border border-neutral-200 dark:border-neutral-800 bg-white dark:bg-neutral-950 hover:border-neutral-300 dark:hover:border-neutral-700 transition-colors duration-300 group">
|
||
|
||
{/*
|
||
ГЛАВНАЯ ССЫЛКА
|
||
z-0 - самый нижний слой
|
||
*/}
|
||
<a href={postLink} class="absolute inset-0 z-0" aria-label={`Читать: ${displayTitle}`}></a>
|
||
|
||
{/*
|
||
КОНТЕНТ
|
||
z-10 - слой выше
|
||
*/}
|
||
<div class="relative z-10 pointer-events-none">
|
||
|
||
{/*
|
||
ВЕРХНЯЯ СТРОКА:
|
||
Слева - декоративная линия
|
||
Справа - Дата
|
||
*/}
|
||
<div class="flex items-center justify-between mb-4">
|
||
|
||
{/* Слева: Декоративная линия ("строка") */}
|
||
<div class="w-12 h-0.5 bg-neutral-200 dark:bg-neutral-800 rounded-full group-hover:bg-neutral-300 dark:group-hover:bg-neutral-700 transition-colors"></div>
|
||
|
||
{/* Справа: Дата */}
|
||
<div class="flex items-center gap-2 text-xs text-neutral-500">
|
||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-4 h-4 text-neutral-400">
|
||
<path fill-rule="evenodd" d="M6.75 2.25A.75.75 0 017.5 3v1.5h9V3A.75.75 0 0118 3v1.5h.75a3 3 0 013 3v11.25a3 3 0 01-3 3H5.25a3 3 0 01-3-3V7.5a3 3 0 013-3H6V3a.75.75 0 01.75-.75zm13.5 9a1.5 1.5 0 00-1.5-1.5H5.25a1.5 1.5 0 00-1.5 1.5v7.5a1.5 1.5 0 001.5 1.5h13.5a1.5 1.5 0 001.5-1.5v-7.5z" clip-rule="evenodd" />
|
||
</svg>
|
||
<span class="font-medium">{formattedDate}</span>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
{/* Заголовок */}
|
||
<h2 class="text-xl font-bold text-neutral-900 dark:text-neutral-100 mb-2 group-hover:text-indigo-600 dark:group-hover:text-indigo-400 transition-colors">
|
||
{displayTitle}
|
||
</h2>
|
||
|
||
{/* Описание */}
|
||
<p class="text-sm text-neutral-600 dark:text-neutral-400 leading-relaxed line-clamp-2 mb-4">
|
||
{post.description}
|
||
</p>
|
||
</div>
|
||
|
||
{/*
|
||
НИЗ: Теги
|
||
z-20 - верхний слой, клики включены
|
||
*/}
|
||
{post.tags && post.tags.length > 0 && (
|
||
<div class="relative z-20 mt-auto pt-4 border-t border-neutral-100 dark:border-neutral-900 flex flex-wrap gap-2 pointer-events-auto">
|
||
{post.tags.map((tag) => (
|
||
<a
|
||
href={`/blog/tags/${tag.toLowerCase()}`}
|
||
class="text-xs text-neutral-500 hover:text-indigo-600 dark:hover:text-indigo-400 transition-colors bg-neutral-50 dark:bg-neutral-900/50 px-2 py-1 rounded"
|
||
>
|
||
#{tag}
|
||
</a>
|
||
))}
|
||
</div>
|
||
)}
|
||
|
||
</div>
|
||
);
|
||
})
|
||
} |