74 lines
2.4 KiB
TypeScript
74 lines
2.4 KiB
TypeScript
"use client";
|
|
import { convertDateFormat, formatTextToHtmlTag } from "@/utils/global";
|
|
import Image from "next/image";
|
|
import { EyeIcon, EyeIconMdi } from "../icons";
|
|
|
|
export default function DetailNews(props: { data: any }) {
|
|
const { data } = props;
|
|
return (
|
|
<div className="px-3 md:px-36">
|
|
<div className=" px-1 md:px-3">
|
|
<Image
|
|
width={1100}
|
|
height={500}
|
|
alt="NextUI hero Image"
|
|
src="/detail.png"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<div className="md:flex px-1 md:px-6 text-xs lg:text-medium gap-3">
|
|
<p>
|
|
Oleh <b className="capitalize">{data?.createdByName}</b>
|
|
</p>
|
|
<p className="hidden md:block">|</p>
|
|
<p>Diupdate pada {convertDateFormat(data?.createdAt)} WIB</p>
|
|
<p className="hidden md:block">|</p>
|
|
<p className="flex items-center gap-1">
|
|
<EyeIconMdi />
|
|
{data?.viewCount === null ? 0 : data?.viewCount}
|
|
</p>
|
|
<div className="flex gap-2 md:hidden">
|
|
<div>
|
|
<Image height={185} width={185} src="/fb.png" alt="medsos" />
|
|
</div>
|
|
<div>
|
|
<Image height={185} width={185} src="/twitter.png" alt="medsos" />
|
|
</div>
|
|
<div>
|
|
<Image
|
|
height={185}
|
|
width={185}
|
|
src="/linkedin.png"
|
|
alt="medsos"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<Image height={185} width={185} src="/wa.png" alt="medsos" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="px-1 md:px-5 text-sm md:text-medium space-y-3 py-2">
|
|
<p className="font-bold text-lg">{data?.title}</p>
|
|
<div
|
|
dangerouslySetInnerHTML={formatTextToHtmlTag(data?.htmlDescription)}
|
|
/>
|
|
</div>
|
|
<div className="hidden sm:grid grid-cols-5 px-1 md:px-3 pt-10">
|
|
<div>
|
|
<Image height={185} width={185} src="/fb.png" alt="medsos" />
|
|
</div>
|
|
<div>
|
|
<Image height={185} width={185} src="/twitter.png" alt="medsos" />
|
|
</div>
|
|
<div>
|
|
<Image height={185} width={185} src="/linkedin.png" alt="medsos" />
|
|
</div>
|
|
<div>
|
|
<Image height={185} width={185} src="/wa.png" alt="medsos" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|