97 lines
3.6 KiB
TypeScript
97 lines
3.6 KiB
TypeScript
import Breadcrumb from '~/components/ui/breadcrumb'
|
|
import { Card } from '~/components/ui/card'
|
|
import { Carousel } from '~/components/ui/carousel'
|
|
import IconsSocial from '~/components/ui/icons-social'
|
|
// eslint-disable-next-line no-restricted-imports
|
|
import { BERITA, CONTENT } from '~/pages/news-detail/data'
|
|
|
|
export const NewsDetailPage = () => {
|
|
const { title, content, featured, slug, author, date, tags } = CONTENT
|
|
return (
|
|
<div className="relative mx-5 sm:mx-10">
|
|
<Card>
|
|
<div className="py-5 sm:px-30">
|
|
<Breadcrumb slug={slug} />
|
|
<h2 className="text-xl font-extrabold text-[#2E2F7C] sm:text-4xl">
|
|
{title}
|
|
</h2>
|
|
|
|
{/* next planing create component for this section */}
|
|
<div className="my-5 flex w-full items-center justify-between align-middle">
|
|
<div className="flex items-center gap-2 align-middle">
|
|
<img
|
|
src={'https://placehold.co/50x50.png'}
|
|
alt={title}
|
|
className="h-12 w-12 rounded-full"
|
|
/>
|
|
<div>
|
|
<h4 className="text-md">{author}</h4>
|
|
<p className="text-sm">
|
|
{date.toJSON().slice(0, 10)} . 5 min read{' '}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<IconsSocial className="ml-auto"></IconsSocial>
|
|
</div>
|
|
{/* end next planing create component for this section */}
|
|
<div className="w-full bg-amber-200">
|
|
<img
|
|
src={featured}
|
|
alt={title}
|
|
className="object-center"
|
|
/>
|
|
</div>
|
|
<article className="my-8">
|
|
<div>{content}</div>
|
|
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nesciunt
|
|
asperiores corporis, facilis praesentium tenetur rerum officiis!
|
|
Perspiciatis, sed cupiditate. Libero eos, cupiditate perferendis
|
|
delectus accusamus culpa veniam voluptatem sequi soluta hic optio
|
|
dolor, provident perspiciatis nihil sit. Est facere itaque natus
|
|
saepe odio ipsam recusandae at mollitia deserunt. Laboriosam atque
|
|
id aperiam tempore corporis magnam dolores vitae, maxime modi
|
|
quibusdam architecto sed aliquam error suscipit distinctio ratione
|
|
dolorum exercitationem vero sapiente? Commodi rem quidem vitae
|
|
eaque, consequuntur maxime facilis ea aliquam odio atque magni
|
|
delectus rerum fugiat aliquid, qui omnis incidunt libero quasi
|
|
distinctio exercitationem, reprehenderit minus officiis velit enim.
|
|
</article>
|
|
|
|
<div className="flex items-end justify-between border-b-3 border-b-gray-300 py-4">
|
|
<div className="flex flex-col">
|
|
<p className="mb-2">Share this post</p>
|
|
<IconsSocial />
|
|
</div>
|
|
<div className="flex flex-wrap items-end">
|
|
{tags?.map((tag) => (
|
|
<span
|
|
key={tag}
|
|
className="mx-2 rounded bg-gray-300 p-1"
|
|
>
|
|
{tag}
|
|
</span>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="mt-5 flex items-center gap-2 align-middle">
|
|
<img
|
|
src={'https://placehold.co/50x50.png'}
|
|
alt={title}
|
|
className="h-12 w-12 rounded-full"
|
|
/>
|
|
<div>
|
|
<h4 className="text-md">{author}</h4>
|
|
<p className="text-sm">Job title, Company name</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
|
|
<Card>
|
|
<Carousel {...BERITA} />
|
|
</Card>
|
|
</div>
|
|
)
|
|
}
|