mediahub
/
mediahub-fe
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix detail content tbnews

This commit is contained in:
Sabda Yagra 2025-03-26 15:07:52 +07:00
parent 3849803dfa
commit 87b57f1442
6 changed files with 86 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/[locale]/(public)/(polda)/tbnews/[polda_name]/components/contact-us.tsx
View File

@ -5,7 +5,7 @@ import React from "react";
const ContactUs = () => {
return (
<div className="bg-[#fbfbfb] text-black px-4 lg:px-20 mb-10 mt-10">
<div className="bg-[#fbfbfb] text-black px-4 lg:px-20 mb-10 h-[150px] lg:h-[300px]">
<div className="container mx-auto py-8">
<div className="flex flex-col md:flex-row justify-between items-start gap-4">
{/* Logo */}

87
app/[locale]/(public)/(polda)/tbnews/[polda_name]/components/hero-kaltara.tsx
View File

@ -1,6 +1,7 @@
"use client";
import { Reveal } from "@/components/landing-page/Reveal";
import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from "@/components/ui/carousel";
import { Icon } from "@/components/ui/icon";
import { Skeleton } from "@/components/ui/skeleton";
import { Link } from "@/i18n/routing";
@ -12,6 +13,7 @@ import React, { useEffect, useState } from "react";
const HeroKaltara = () => {
const params = useParams();
const locale = params?.locale;
const [content, setContent] = useState([]);
const [centerPadding, setCenterPadding] = useState<any>();
const [isBannerLoading, setIsBannerLoading] = useState(true);
@ -111,37 +113,84 @@ const HeroKaltara = () => {
],
};
const shimmer = (w: number, h: number) => `
<svg width="${w}" height="${h}" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<linearGradient id="g">
<stop stop-color="#bcbcbd" offset="20%" />
<stop stop-color="#f9fafb" offset="50%" />
<stop stop-color="#bcbcbd" offset="70%" />
</linearGradient>
</defs>
<rect width="${w}" height="${h}" fill="#bcbcbd" />
<rect id="r" width="${w}" height="${h}" fill="url(#g)" />
<animate xlink:href="#r" attributeName="x" from="-${w}" to="${w}" dur="1s" repeatCount="indefinite" />
</svg>`;
const toBase64 = (str: string) => (typeof window === "undefined" ? Buffer.from(str).toString("base64") : window.btoa(str));
return (
<>
<Reveal>
<div className="flex flex-col lg:flex-row items-start justify-center gap-8 px-4 lg:px-20 w-full py-4 mt-0 lg:mt-2">
{isBannerLoading ? (
// <div className="flex flex-col space-y-3 mx-auto w-full lg:w-2/3">
// <Skeleton className="h-[310px] lg:h-[420px] rounded-xl" />
// <div className="space-y-2">
// <Skeleton className="h-4 w-[250px]" />
// <Skeleton className="h-4 w-[200px]" />
// </div>
// </div>
<div className="flex flex-col space-y-3 mx-auto w-full lg:w-2/3">
<Skeleton className="h-[310px] lg:h-[420px] rounded-xl" />
<Skeleton className="h-[310px] lg:h-[420px] rounded-xl" />
<div className="space-y-2">
<Skeleton className="h-4 w-[250px]" />
<Skeleton className="h-4 w-[200px]" />
</div>
</div>
) : (
<div className="w-full lg:h-full">
{content?.slice(0, 1)?.map((row: any, index: number) => (
<div className="flex flex-col gap-[10px]" key={index}>
<Link href={prefixPath + `/video/detail/${row.slug}`}>
<Image src={row?.thumbnailLink} alt="gambar-utama" width={1920} height={1080} className="w-full h-[200px] lg:h-[500px] rounded-sm object-cover" />
</Link>
<h1 className="font-bold font-sans text-[30px]">{row.title}</h1>
<div className="flex flex-row gap-3">
<p className="text-[#c03724] font-sans text-[16px]">{row?.categoryName}</p>
<p className="text-[16px] font-sans flex flex-row items-center text-slate-500 dark:text-white gap-1">
{getPublicLocaleTimestamp(new Date(row?.createdAt))}
{/* {row?.createdAt} */}
</p>
</div>
<p className="text-[16px] font-sans text-justify" dangerouslySetInnerHTML={{ __html: row?.description }} />
</div>
))}
</div>
// <div className="w-full lg:h-full">
// {content?.slice(0, 1)?.map((row: any, index: number) => (
// <div className="flex flex-col gap-[10px]" key={index}>
// <Link href={prefixPath + `/image/detail/${row.slug}`}>
// <Image src={row?.thumbnailLink} alt="gambar-utama" width={1920} height={1080} className="w-full h-[200px] lg:h-[500px] rounded-sm object-cover" />
// </Link>
// <h1 className="font-bold font-sans text-[30px]">{row.title}</h1>
// <div className="flex flex-row gap-3">
// <p className="text-[#c03724] font-sans text-[16px]">{row?.categoryName}</p>
// <p className="text-[16px] font-sans flex flex-row items-center text-slate-500 dark:text-white gap-1">
// {getPublicLocaleTimestamp(new Date(row?.createdAt))}
// {/* {row?.createdAt} */}
// </p>
// </div>
// <p className="text-[16px] font-sans text-justify" dangerouslySetInnerHTML={{ __html: row?.description }} />
// </div>
// ))}
// </div>
<Carousel className="lg:w-2/3 lg:h-full ">
<CarouselContent>
{content?.map((row: any) => (
<CarouselItem key={row?.id}>
<div className="flex flex-col gap-[10px]">
<Link href={`${locale}/image/detail/${row?.slug}`}>
<Image src={row?.thumbnailLink} alt="gambar-utama" width={1920} height={1080} className="w-full h-[200px] lg:h-[500px] rounded-sm object-cover" />
</Link>
<h1 className="font-bold font-sans text-[30px]">{row.title}</h1>
<div className="flex flex-row gap-3">
<p className="text-[#c03724] font-sans text-[16px]">{row?.categoryName}</p>
<p className="text-[16px] font-sans flex flex-row items-center text-slate-500 dark:text-white gap-1">
{getPublicLocaleTimestamp(new Date(row?.createdAt))}
{/* {row?.createdAt} */}
</p>
</div>
<p className="text-[16px] font-sans text-justify" dangerouslySetInnerHTML={{ __html: row?.description }} />
</div>
</CarouselItem>
))}
</CarouselContent>
<CarouselPrevious className="hover:bg-black ml-1 lg:ml-0" />
<CarouselNext className="hover:bg-black mr-1 lg:mr-0" />
</Carousel>
)}
{isBannerLoading ? (

5
app/[locale]/(public)/(polda)/tbnews/[polda_name]/components/navbar-kaltara.tsx
View File

@ -44,7 +44,7 @@ const categoryLinks: any = {
Kesehatan: "https://tribratanews.kaltara.polri.go.id/category/kesehatan/",
Olahraga: "https://tribratanews.kaltara.polri.go.id/category/olahraga/",
PPA: "https://tribratanews.kaltara.polri.go.id/category/ppa/",
MediaHub: "https://new.netidhub.com/",
MediaHub: "https://new.netidhub.com/in/polda/kaltara",
};
const NavbarKaltara = () => {
@ -53,10 +53,11 @@ const NavbarKaltara = () => {
return (
<div className="bg-[#c03724] w-full py-3 px-4 lg:px-20 items-center sticky top-0 z-50">
<div className="flex flex-row justify-between items-center">
<div className="flex flex-row justify-between items-center">
<div className="flex w-full justify-between items-center">
<Link href="/tbnews/polda-kaltara">
<Image width={2560} height={1440} src="/assets/img/logo-new-tbnews.png" alt="image" className="h-28 w-72" />
</Link>
<div className="flex flex-row">
<div className="text-white font-semibold hidden lg:flex flex-row gap-14 items-center">
{category?.map((data: any) => (

2
app/[locale]/(public)/(polda)/tbnews/[polda_name]/components/pps-section.tsx
View File

@ -29,7 +29,7 @@ const PpsSection = () => {
{image?.map((news: any, index) => (
<CarouselItem key={news?.id} className="grid grid-cols-1">
<Card key={index} className="w-full overflow-hidden shadow-lg h-full">
<Image src={news.src} alt="pps" width={400} height={250} className="w-full h-full object-cover rounded-md" />
<Image src={news.src} alt="pps" width={2560} height={1440} className="w-full h-[60vh] object-cover rounded-md" />
<CardContent className="p-4">
{/* <div className="flex items-center gap-2 text-white text-xs font-bold">

0
app/[locale]/(public)/(polda)/tbnews/[polda_name]/video/detail/[slug]/layout.tsx → app/[locale]/(public)/(polda)/tbnews/[polda_name]/image/detail/[slug]/layout.tsx
View File

17
app/[locale]/(public)/(polda)/tbnews/[polda_name]/video/detail/[slug]/page.tsx → app/[locale]/(public)/(polda)/tbnews/[polda_name]/image/detail/[slug]/page.tsx
View File

@ -619,7 +619,7 @@ const DetailInfo = () => {
return (
<>
<div className="min-h-screen px-4 md:px-24 py-4 my-0 lg:my-[150px]">
<div className="min-h-screen px-4 md:px-24 mt-5">
<div className="rounded-md overflow-hidden md:flex">
{/* Bagian Kiri */}
<div className="md:w-3/4">
@ -630,7 +630,16 @@ const DetailInfo = () => {
</div>
) : (
<div className="relative">
<Image placeholder={`data:image/svg+xml;base64,${toBase64(shimmer(700, 475))}`} width={2560} height={1440} src={detailDataImage?.files[selectedImage]?.url} alt="Main" className="rounded-lg w-auto h-fit" />
{/* <Image placeholder={`data:image/svg+xml;base64,${toBase64(shimmer(700, 475))}`} width={2560} height={1440} src={detailDataImage?.files[selectedImage]?.url} alt="Main" className="rounded-lg w-auto h-fit" /> */}
<Image
placeholder={`data:image/svg+xml;base64,${toBase64(shimmer(700, 475))}`}
width={2560}
height={1440}
src={detailDataImage?.files?.length > 0 ? detailDataImage.files[selectedImage]?.url : detailDataImage?.thumbnailLink}
alt="Main"
className="rounded-lg w-auto h-fit"
/>
<div className="absolute top-4 left-4"></div>
</div>
)}
@ -793,9 +802,9 @@ const DetailInfo = () => {
</div>
</div>
<div className="w-full mb-8">
<div className="w-full ">
{/* Comment */}
<div className="flex flex-col my-16 p-4 lg:p-10 bg-[#f7f7f7] dark:bg-slate-600">
<div className="flex flex-col mt-16 p-4 lg:p-10 bg-[#f7f7f7] dark:bg-slate-600">
<div className="gap-5 flex flex-col px-4 lg:px-14">
<p className="flex items-start text-lg">{t("comment")}</p>
<Textarea placeholder={t("leaveComment")} className="flex w-full pb-12" onChange={getInputValue} />