90 lines
3.9 KiB
TypeScript
90 lines
3.9 KiB
TypeScript
|
import Link from "next/link";
|
||
|
|
|
||
|
|
export default function Article({
|
||
|
|
title,
|
||
|
|
date,
|
||
|
|
content,
|
||
|
|
}: {
|
||
|
|
title: string;
|
||
|
|
date: string;
|
||
|
|
content: string;
|
||
|
|
}) {
|
||
|
|
return (
|
||
|
|
<section className="py-10 lg:py-20 bg-gray-900">
|
||
|
|
<div className="container mx-auto px-4">
|
||
|
|
<div className="max-w-2xl mx-auto mb-12 text-center">
|
||
|
|
<span className="text-base lg:text-xl text-gray-400">
|
||
|
|
24 Janvier, 2024
|
||
|
|
</span>
|
||
|
|
<div className="mt-2">
|
||
|
|
<h1 className="mb-6 text-4xl lg:text-5xl font-bold font-heading text-white">
|
||
|
|
{title}
|
||
|
|
</h1>
|
||
|
|
{/* <div className='flex justify-center'>
|
||
|
|
<div className='mr-4'>
|
||
|
|
<img
|
||
|
|
className='w-12 h-12 object-cover object-top rounded-full'
|
||
|
|
src='https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=334&q=80'
|
||
|
|
alt=''
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
<div className='text-left'>
|
||
|
|
<a href='#'>
|
||
|
|
<h3 className='text-gray-200 hover:text-gray-600 hover:underline font-bold'>
|
||
|
|
Alice Bradley
|
||
|
|
</h3>
|
||
|
|
</a>
|
||
|
|
<a href='#'>
|
||
|
|
<span className='text-xs text-green-600 font-bold'>
|
||
|
|
Author
|
||
|
|
</span>
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
</div> */}
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<a
|
||
|
|
className="uppercase text-base text-green-600 hover:text-green-700 hover:underline"
|
||
|
|
href="#"
|
||
|
|
>
|
||
|
|
#Travel
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div className="max-w-2xl mx-auto prose">
|
||
|
|
{content}
|
||
|
|
{/* <p className='mb-6 leading-loose text-gray-200'>
|
||
|
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
|
||
|
|
Praesent commodo est eget consequat imperdiet. Suspendisse
|
||
|
|
laoreet scelerisque lobortis. Mauris facilisis hendrerit nulla
|
||
|
|
at vehicula. Suspendisse potenti. Ut in nulla a purus bibendum
|
||
|
|
convallis. Suspendisse id nunc maximus, suscipit ante ac,
|
||
|
|
vulputate massa. Sed ut nunc suscipit, bibendum arcu a, interdum
|
||
|
|
elit. Nullam laoreet mollis dictum. Ut suscipit, magna at
|
||
|
|
elementum iaculis, erat erat fermentum justo, sit amet ultrices
|
||
|
|
enim leo sit amet purus. Nulla sed erat molestie, auctor mauris
|
||
|
|
lobortis, iaculis justo.
|
||
|
|
</p>
|
||
|
|
<p className='leading-loose text-gray-200'>
|
||
|
|
Duis hendrerit dui in dui ornare luctus. Nullam gravida
|
||
|
|
tincidunt lorem cursus suscipit. Integer scelerisque sem et sem
|
||
|
|
porta, eu volutpat mi tempor. Duis interdum sodales lacus non
|
||
|
|
tempor. Nam mattis, sapien a commodo ultrices, nunc orci
|
||
|
|
tincidunt ante, tempus tempus turpis metus laoreet lacus.
|
||
|
|
Praesent condimentum, arcu ut fringilla tincidunt, augue diam
|
||
|
|
pretium augue, sit amet vestibulum nunc felis vel metus. Duis
|
||
|
|
dolor nulla, pellentesque non ultrices ut, convallis eu felis.
|
||
|
|
Duis luctus tempor arcu, vitae elementum massa porta non. Morbi
|
||
|
|
aliquet, neque ut volutpat sodales, dui enim facilisis enim, ut
|
||
|
|
dictum lacus neque in urna. Nam metus elit, ullamcorper pretium
|
||
|
|
nisi at, aliquet gravida lectus. Nullam id lectus pellentesque,
|
||
|
|
suscipit dolor eget, consequat velit. Pellentesque finibus
|
||
|
|
commodo nisl, id interdum leo. Maecenas aliquam felis justo, ut
|
||
|
|
sagittis nunc maximus ut.
|
||
|
|
</p> */}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
);
|
||
|
|
}
|