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> {
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;
return {
title: article.title,
@ -22,7 +25,10 @@ export async function generateMetadata({ params }: any): Promise<Metadata> {
}
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 article = res?.data?.data;
return (

2
components/landing/HeaderNews.tsx
View File

@ -371,7 +371,7 @@ export default function HeaderNews() {
key={list?.id}
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>
</Link>
<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 id: any = params?.id;
const shareText = "Humas Polri";
const [filteredFiles, setFilteredFiles] = useState<any>([]);
// const [filteredFiles, setFilteredFiles] = useState<any>([]);
const [uid, setUid] = useState<any>("");
const [token, setToken] = useState<any>("");
@ -166,9 +166,9 @@ export default function DetailNews(props: { data: any; listArticle: any }) {
</p>
</div>
<div className="flex justify-center my-2 lg:my-5">
{filteredFiles ? (
filteredFiles[0]?.file_name.split(".")[1].includes("doc") ||
filteredFiles[0]?.file_name.split(".")[1].includes("pdf") ? (
{data.files.length > 0 ? (
data.files[0]?.file_name.split(".")[1].includes("doc") ||
data.files[0]?.file_name.split(".")[1].includes("pdf") ? (
<Image
classNames={{
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"
/>
) : (
filteredFiles?.length > 0 && (
// <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
data.files?.length > 0 && (
<Image
// classNames={{
// wrapper: "!w-full !max-w-full",
// img: "!w-full",
// }}
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"
/>
)
@ -204,10 +195,10 @@ export default function DetailNews(props: { data: any; listArticle: any }) {
""
)}
</div>
{filteredFiles?.length > 0 &&
(filteredFiles[0].file_name.split(".")[1].includes("doc") ||
filteredFiles[0].file_name.split(".")[1].includes("pdf") ? (
filteredFiles?.map((file: any, index: number) => (
{data.files?.length > 0 &&
(data.files[0].file_name.split(".")[1].includes("doc") ||
data.files[0].file_name.split(".")[1].includes("pdf") ? (
data.files?.map((file: any, index: number) => (
<Accordion key={file?.id} variant="splitted" className="px-0">
<AccordionItem
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">
{filteredFiles?.map((file: any, index: number) => (
{data.files?.map((file: any, index: number) => (
<a
key={file.id}
onClick={() => setImageNow(index)}