86 lines
2.7 KiB
TypeScript
86 lines
2.7 KiB
TypeScript
import htmlParse from 'html-react-parser'
|
|
import { useReadingTime } from 'react-hook-reading-time'
|
|
import { useRouteLoaderData } from 'react-router'
|
|
|
|
import type { TTagResponse } from '~/apis/common/get-tags'
|
|
import { Card } from '~/components/ui/card'
|
|
import { CarouselSection } from '~/components/ui/carousel-section'
|
|
import { NewsAuthor } from '~/components/ui/news-author'
|
|
import { SocialShareButtons } from '~/components/ui/social-share'
|
|
import { BERITA } from '~/data/contents'
|
|
import type { loader } from '~/routes/_news.detail.$slug'
|
|
|
|
export const NewsDetailPage = () => {
|
|
const loaderData = useRouteLoaderData<typeof loader>(
|
|
'routes/_news.detail.$slug',
|
|
)
|
|
const currentUrl = globalThis.location
|
|
const { newsDetailData } = loaderData || {}
|
|
const { title, content, featured_image, author, live_at, tags } =
|
|
newsDetailData || {}
|
|
|
|
const { text } = useReadingTime(content || '')
|
|
|
|
return (
|
|
<div className="sm-max:mx-5 relative">
|
|
<Card>
|
|
<div className="py-5 sm:px-30">
|
|
<h2 className="text-xl font-extrabold text-[#2E2F7C] sm:text-4xl">
|
|
{title}
|
|
</h2>
|
|
|
|
<div className="my-5 w-full items-center justify-between gap-2 align-middle sm:flex">
|
|
<NewsAuthor
|
|
author={author}
|
|
live_at={live_at}
|
|
text={text}
|
|
/>
|
|
<SocialShareButtons
|
|
url={`${currentUrl}`}
|
|
title={`${title}`}
|
|
/>
|
|
</div>
|
|
|
|
<div className="w-full bg-amber-200">
|
|
<img
|
|
src={featured_image}
|
|
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">
|
|
{content && htmlParse(content)}
|
|
</article>
|
|
</div>
|
|
<div className="items-end justify-between 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>
|
|
|
|
<SocialShareButtons
|
|
url={`${currentUrl}`}
|
|
title={`${title}`}
|
|
/>
|
|
</div>
|
|
<div className="flex flex-wrap items-end gap-2">
|
|
{tags?.map((tag: TTagResponse) => (
|
|
<span
|
|
key={tag.id}
|
|
className="rounded bg-gray-300 p-1"
|
|
>
|
|
{tag.name}
|
|
</span>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
|
|
<Card className="bg-white p-5 max-sm:hidden">
|
|
<CarouselSection {...BERITA} />
|
|
</Card>
|
|
</div>
|
|
)
|
|
}
|