66 lines
2.3 KiB
TypeScript
66 lines
2.3 KiB
TypeScript
import { BlogInterface } from "@/components/blog";
|
|
|
|
export interface BlogItemParams {
|
|
slug: string
|
|
title_style: string,
|
|
subtitle_style: string,
|
|
p_style: string,
|
|
default_img: string
|
|
blog_content: BlogInterface
|
|
}
|
|
|
|
export default function BlogItem({ params }
|
|
: { params: BlogItemParams }
|
|
) {
|
|
return (
|
|
<main className="flex flex-col w-full lg:md:py-24 sm:py-24">
|
|
<section className="container self-center max-w-2xl">
|
|
<div className="blog-title w-full h-28 justify-center">
|
|
<h1 className="mb-3 text-pretty text-3xl font-semibold lg:text-5xl">
|
|
{params.slug}
|
|
</h1>
|
|
</div>
|
|
<div className="content">
|
|
<div>
|
|
<h2 className={params.subtitle_style}>Subtitle 1</h2>
|
|
<p className={params.p_style}>
|
|
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti architecto incidunt, hic in consectetur eligendi nobis numquam tenetur sit repellat et unde, maxime ducimus autem esse temporibus omnis eum molestias!
|
|
</p>
|
|
</div>
|
|
<div>
|
|
<img
|
|
src={params.default_img}
|
|
alt={params.slug}
|
|
className="aspect-[16/9] mb-5 rounded-sm h-full w-full object-cover object-center"
|
|
/>
|
|
|
|
</div>
|
|
<div>
|
|
<h2 className={params.subtitle_style}>Subtitle 2</h2>
|
|
<p className={params.p_style}>
|
|
Lorem ipsm dolor sit amet, consectetur adipisicing elit. Deleniti architecto incidunt, hic in consectetur eligendi nobis numquam tenetur sit repellat et unde, maxime ducimus autem esse temporibus omnis eum molestias!
|
|
</p>
|
|
</div>
|
|
<div>
|
|
<img
|
|
src={params.default_img}
|
|
alt={params.slug}
|
|
className="aspect-[16/9] mb-5 rounded-sm h-full w-full object-cover object-center"
|
|
/>
|
|
|
|
</div>
|
|
<div>
|
|
<h2 className={params.subtitle_style}>Subtitle 3</h2>
|
|
<p className={params.p_style}>
|
|
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti architecto incidunt, hic in consectetur eligendi nobis numquam tenetur sit repellat et unde, maxime ducimus autem esse temporibus omnis eum molestias!
|
|
</p>
|
|
<p className={params.p_style}>
|
|
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti architecto incidunt, hic in consectetur eligendi nobis numquam tenetur sit repellat et unde, maxime ducimus autem esse temporibus omnis eum molestias!
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
)
|
|
}
|