98 lines
3.2 KiB
TypeScript
98 lines
3.2 KiB
TypeScript
import htmlParse from 'html-react-parser'
|
|
import { useReadingTime } from 'react-hook-reading-time'
|
|
import { useRouteLoaderData } from 'react-router'
|
|
import { twMerge } from 'tailwind-merge'
|
|
|
|
import { Button } from '~/components/ui/button'
|
|
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 { Tags } from '~/components/ui/tags'
|
|
import { useNewsContext } from '~/contexts/news'
|
|
import type { loader } from '~/routes/_news.detail.$slug'
|
|
import type { TNews } from '~/types/news'
|
|
|
|
export const NewsDetailPage = () => {
|
|
const { setIsSuccessOpen } = useNewsContext()
|
|
const loaderData = useRouteLoaderData<typeof loader>(
|
|
'routes/_news.detail.$slug',
|
|
)
|
|
const berita: TNews = {
|
|
title: loaderData?.beritaCategory?.name || '',
|
|
description: loaderData?.beritaCategory?.description || '',
|
|
items: loaderData?.beritaData || Promise.resolve({ data: [] }),
|
|
}
|
|
const currentUrl = globalThis.location
|
|
const { title, content, featured_image, author, live_at, tags } =
|
|
loaderData?.newsDetailData || {}
|
|
const { shouldSubscribe } = loaderData || {}
|
|
|
|
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 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 flex-col items-center justify-center gap-y-4">
|
|
<article
|
|
className={twMerge(
|
|
'prose prose-headings:my-0.5 prose-p:my-0.5',
|
|
shouldSubscribe ? 'line-clamp-5' : '',
|
|
)}
|
|
>
|
|
{content && htmlParse(content)}
|
|
</article>
|
|
{shouldSubscribe && (
|
|
<Button
|
|
onClick={() => setIsSuccessOpen('warning')}
|
|
className="w-full"
|
|
>
|
|
Read More
|
|
</Button>
|
|
)}
|
|
</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>
|
|
|
|
<Tags tags={tags || []} />
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
|
|
<Card className="bg-white p-5 max-sm:hidden">
|
|
<CarouselSection {...berita} />
|
|
</Card>
|
|
</div>
|
|
)
|
|
}
|