86 lines
2.7 KiB
TypeScript
86 lines
2.7 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/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 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="prose prose-stone"
|
|
dangerouslySetInnerHTML={{ __html: content }}
|
|
/>
|
|
<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 className="a" />
|
|
</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>
|
|
)
|
|
}
|