89 lines
3.0 KiB
TypeScript
89 lines
3.0 KiB
TypeScript
import htmlParse from 'html-react-parser'
|
|
|
|
import { Breadcrumb } from '~/components/ui/breadcrumb'
|
|
import { Card } from '~/components/ui/card'
|
|
import { CarouselSection } from '~/components/ui/carousel-section'
|
|
import { IconsSocial } from '~/components/ui/social-share'
|
|
|
|
import { BERITA, CONTENT } from './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 w-full items-center justify-between gap-2 align-middle sm:flex">
|
|
<div className="mb-2 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="flex-row-reverse" />
|
|
</div>
|
|
{/* end next planing create component for this section */}
|
|
<div className="w-full bg-amber-200">
|
|
<img
|
|
src={featured}
|
|
alt={title}
|
|
className="w-full object-cover object-center sm:h-[600px]"
|
|
/>
|
|
</div>
|
|
|
|
<div className="mt-8 flex items-center justify-center">
|
|
<article className="prose prose-stone">
|
|
{htmlParse(content)}
|
|
</article>
|
|
</div>
|
|
<div className="items-end justify-between border-b-3 border-b-gray-300 py-4 sm:flex">
|
|
<div className="flex flex-col max-sm:mb-3">
|
|
<p className="mb-2">Share this post</p>
|
|
<IconsSocial className="a" />
|
|
</div>
|
|
<div className="flex flex-wrap items-end gap-2">
|
|
{tags?.map((tag) => (
|
|
<span
|
|
key={tag}
|
|
className="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 className="hidden sm:block">
|
|
<CarouselSection {...BERITA} />
|
|
</Card>
|
|
</div>
|
|
)
|
|
}
|