51 lines
1.7 KiB
TypeScript
51 lines
1.7 KiB
TypeScript
import { Header, Link, Separator, Article, VStack } from '@ermnvldmr/ui';
|
|
import React from 'react';
|
|
|
|
import { sortedArticles } from '../../../content/registry';
|
|
import { IndexLayout } from '../../components/layouts/IndexLayout/IndexLayout';
|
|
import { createPage } from '../../lib/core/createPage';
|
|
import { SITE_TITLE } from '../../lib/shared/constants';
|
|
|
|
createPage(
|
|
function ArticlesList(): React.JSX.Element {
|
|
return (
|
|
<IndexLayout>
|
|
<VStack className="w-full" gap={8}>
|
|
<Header level={1}>Articles</Header>
|
|
<div className="grid grid-cols-1 gap-8 md:grid-cols-2">
|
|
{sortedArticles.map((article, index) => (
|
|
<React.Fragment key={article.slug}>
|
|
{index > 0 && index % 2 === 0 && (
|
|
<div className="col-span-1 py-8 md:col-span-2">
|
|
<Separator className="w-full" type="double" />
|
|
</div>
|
|
)}
|
|
<Link
|
|
className="group block h-full no-underline!"
|
|
href={`/articles/${article.slug}`}
|
|
>
|
|
<Article
|
|
additionalText={article.tags?.join(' • ')}
|
|
headline={article.title}
|
|
subHeadline={article.createdDate.toLocaleDateString(undefined, {
|
|
year: 'numeric',
|
|
month: 'long',
|
|
day: 'numeric',
|
|
})}
|
|
>
|
|
{article.description}
|
|
</Article>
|
|
</Link>
|
|
</React.Fragment>
|
|
))}
|
|
</div>
|
|
</VStack>
|
|
</IndexLayout>
|
|
);
|
|
},
|
|
{
|
|
title: `Articles | ${SITE_TITLE}`,
|
|
description: 'Browse all articles and projects.',
|
|
}
|
|
);
|