humas
/
web-humas-fe
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix:image detail

This commit is contained in:
Rama Priyanto 2025-09-01 12:45:37 +07:00
parent 0809fd0ca8
commit 491939daf1
3 changed files with 21 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
app/news/detail/[id]/page.tsx
View File

@ -8,7 +8,10 @@ type Props = {
}; };
export async function generateMetadata({ params }: any): Promise<Metadata> { export async function generateMetadata({ params }: any): Promise<Metadata> {
const res = await getArticleById(params?.id?.split("-")[0]); // const params = await props.params;
const { id } = await params;
const res = await getArticleById(id?.split("-")[0]);
const article = res?.data?.data; const article = res?.data?.data;
return { return {
title: article.title, title: article.title,
@ -22,7 +25,10 @@ export async function generateMetadata({ params }: any): Promise<Metadata> {
} }
export default async function NewsPage({ params }: any) { export default async function NewsPage({ params }: any) {
const articleId = params?.id?.split("-")[0]; // const params = await props.params;
const { id } = await params;
const articleId = id?.split("-")[0];
const res = await getArticleById(articleId); const res = await getArticleById(articleId);
const article = res?.data?.data; const article = res?.data?.data;
return ( return (

2
components/landing/HeaderNews.tsx
View File

@ -371,7 +371,7 @@ export default function HeaderNews() {
key={list?.id} key={list?.id}
className="text-xs text-left m-2 p-2 dark:bg-[#1E1616] bg-white rounded-md" className="text-xs text-left m-2 p-2 dark:bg-[#1E1616] bg-white rounded-md"
> >
<Link href={`news/detail/${list?.id}`}> <Link href={`news/detail/${list?.id}-${list.slug}`}>
<p className="text-left font-semibold">{list?.title}</p> <p className="text-left font-semibold">{list?.title}</p>
</Link> </Link>
<div className="flex flex-row gap-1"> <div className="flex flex-row gap-1">

33
components/page/detail-news.tsx
View File

@ -37,7 +37,7 @@ export default function DetailNews(props: { data: any; listArticle: any }) {
const params = useParams(); const params = useParams();
const id: any = params?.id; const id: any = params?.id;
const shareText = "Humas Polri"; const shareText = "Humas Polri";
const [filteredFiles, setFilteredFiles] = useState<any>([]); // const [filteredFiles, setFilteredFiles] = useState<any>([]);
const [uid, setUid] = useState<any>(""); const [uid, setUid] = useState<any>("");
const [token, setToken] = useState<any>(""); const [token, setToken] = useState<any>("");
@ -166,9 +166,9 @@ export default function DetailNews(props: { data: any; listArticle: any }) {
</p> </p>
</div> </div>
<div className="flex justify-center my-2 lg:my-5"> <div className="flex justify-center my-2 lg:my-5">
{filteredFiles ? ( {data.files.length > 0 ? (
filteredFiles[0]?.file_name.split(".")[1].includes("doc") || data.files[0]?.file_name.split(".")[1].includes("doc") ||
filteredFiles[0]?.file_name.split(".")[1].includes("pdf") ? ( data.files[0]?.file_name.split(".")[1].includes("pdf") ? (
<Image <Image
classNames={{ classNames={{
wrapper: "!w-full !max-w-full", wrapper: "!w-full !max-w-full",
@ -179,23 +179,14 @@ export default function DetailNews(props: { data: any; listArticle: any }) {
className="object-cover w-[100%] rounded-md" className="object-cover w-[100%] rounded-md"
/> />
) : ( ) : (
filteredFiles?.length > 0 && ( data.files?.length > 0 && (
// <Image <Image
// // classNames={{
// // wrapper: "!w-full !max-w-full",
// // img: "!w-full",
// // }}
// alt="Main Image"
// src={filteredFiles[imageNow]?.file_url}
// className="object-cover w-auto h-[360px] md:h-[480px] mx-auto rounded-md"
// />
<img
// classNames={{ // classNames={{
// wrapper: "!w-full !max-w-full", // wrapper: "!w-full !max-w-full",
// img: "!w-full", // img: "!w-full",
// }} // }}
alt="Main Image" alt="Main Image"
src={filteredFiles[imageNow]?.file_url} src={data.files[imageNow]?.file_url}
className="object-cover w-auto h-[360px] md:h-[480px] mx-auto rounded-md" className="object-cover w-auto h-[360px] md:h-[480px] mx-auto rounded-md"
/> />
) )
@ -204,10 +195,10 @@ export default function DetailNews(props: { data: any; listArticle: any }) {
"" ""
)} )}
</div> </div>
{filteredFiles?.length > 0 && {data.files?.length > 0 &&
(filteredFiles[0].file_name.split(".")[1].includes("doc") || (data.files[0].file_name.split(".")[1].includes("doc") ||
filteredFiles[0].file_name.split(".")[1].includes("pdf") ? ( data.files[0].file_name.split(".")[1].includes("pdf") ? (
filteredFiles?.map((file: any, index: number) => ( data.files?.map((file: any, index: number) => (
<Accordion key={file?.id} variant="splitted" className="px-0"> <Accordion key={file?.id} variant="splitted" className="px-0">
<AccordionItem <AccordionItem
key={file?.id} key={file?.id}
@ -260,7 +251,7 @@ export default function DetailNews(props: { data: any; listArticle: any }) {
)) ))
) : ( ) : (
<div className="flex flex-row gap-3 flex-nowrap overflow-x-auto"> <div className="flex flex-row gap-3 flex-nowrap overflow-x-auto">
{filteredFiles?.map((file: any, index: number) => ( {data.files?.map((file: any, index: number) => (
<a <a
key={file.id} key={file.id}
onClick={() => setImageNow(index)} onClick={() => setImageNow(index)}