55 lines
1.9 KiB
TypeScript
55 lines
1.9 KiB
TypeScript
|
import SectionTitle from '@/components/layout/sectionTitle';
|
||
|
|
import { getTranslations } from 'next-intl/server';
|
||
|
|
import { TLocales } from '@/models/layout';
|
||
|
|
import Button from '@/components/uikit/button';
|
||
|
|
import routeFactory from '@/assets/constants/routeFactory';
|
||
|
|
import { getPosts } from '@/services/blog';
|
||
|
|
import PostsGridView from '../blog/PostsGridView';
|
||
|
|
interface Props {
|
||
|
|
locale: TLocales;
|
||
|
|
className?: string;
|
||
|
|
}
|
||
|
|
export default async function HomePageBlog({ locale, className }: Props) {
|
||
|
|
const t = await getTranslations({ locale });
|
||
|
|
const posts = await getPosts();
|
||
|
|
|
||
|
|
const routes = routeFactory(t, locale);
|
||
|
|
return (
|
||
|
|
<div className={`w-full ${className}`}>
|
||
|
|
<div className="relative container mx-auto w-full bg-white">
|
||
|
|
<div className="relative z-20 grid grid-cols-1 lg:grid-cols-2 lg:gap-28">
|
||
|
|
<SectionTitle
|
||
|
|
title={t('pages_blog_title')}
|
||
|
|
description={t('com_home_blog_title')}
|
||
|
|
description_bold={t('com_home_blog_title_bold')}
|
||
|
|
locale={locale}
|
||
|
|
/>
|
||
|
|
<div className="pt-10 max-lg:hidden">
|
||
|
|
<h4 className="text-base font-extralight tracking-normal max-lg:hidden">
|
||
|
|
{t('com_home_blog_description')}
|
||
|
|
</h4>
|
||
|
|
<Button
|
||
|
|
link={routes.blog.route()}
|
||
|
|
endIcon="showMore"
|
||
|
|
className="mt-5"
|
||
|
|
>
|
||
|
|
{t('com_home_blog_show_more')}
|
||
|
|
</Button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="mt-10 grid grid-cols-1 gap-4 md:grid-cols-2 md:gap-6 lg:grid-cols-3 lg:gap-8">
|
||
|
|
<PostsGridView posts={posts.data?.slice(0, 3)} locale={locale} />
|
||
|
|
</div>
|
||
|
|
<Button
|
||
|
|
link={routes.blog.route()}
|
||
|
|
endIcon="showMore"
|
||
|
|
className="mx-auto mt-10 lg:hidden"
|
||
|
|
>
|
||
|
|
{t('com_home_blog_show_more')}
|
||
|
|
</Button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|