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

fix: change img to Image

This commit is contained in:
sabdayagra 2025-02-06 17:34:22 +07:00
parent 2bb97c5a24
commit 50ca7cfc59
14 changed files with 72 additions and 85 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
app/[locale]/(public)/content-management/download/page.tsx
View File

@ -18,6 +18,7 @@ import { Input } from "@/components/ui/input";
import { Button } from "@/components/ui/button"; import { Button } from "@/components/ui/button";
import { sendMediaUploadToEmail } from "@/service/media-tracking/media-tracking"; import { sendMediaUploadToEmail } from "@/service/media-tracking/media-tracking";
import ImageBlurry from "@/components/ui/image-blurry"; import ImageBlurry from "@/components/ui/image-blurry";
import Image from "next/image";
const Galery = (props: any) => { const Galery = (props: any) => {
const [profile, setProfile] = useState<any>(); const [profile, setProfile] = useState<any>();
@ -376,7 +377,7 @@ const Galery = (props: any) => {
</div> </div>
) : ( ) : (
<p className="flex items-center justify-center"> <p className="flex items-center justify-center">
<img src="/assets/empty-data.png" alt="empty" className="h-52 w-52 my-4" /> <Image width={1920} height={1080} src="/assets/empty-data.png" alt="empty" className="h-52 w-52 my-4" />
</p> </p>
) )
) : selectedTab == "audio" ? ( ) : selectedTab == "audio" ? (
@ -456,7 +457,7 @@ const Galery = (props: any) => {
</div> </div>
) : ( ) : (
<p className="flex items-center justify-center"> <p className="flex items-center justify-center">
<img src="/assets/empty-data.png" alt="empty" className="h-52 w-52 my-4" /> <Image width={1920} height={1080} src="/assets/empty-data.png" alt="empty" className="h-52 w-52 my-4" />
</p> </p>
) )
) : selectedTab == "image" ? ( ) : selectedTab == "image" ? (
@ -517,7 +518,7 @@ const Galery = (props: any) => {
</div> </div>
) : ( ) : (
<p className="flex items-center justify-center"> <p className="flex items-center justify-center">
<img src="/assets/empty-data.png" alt="empty" className="h-52 w-52 my-4" /> <Image width={1920} height={1080} src="/assets/empty-data.png" alt="empty" className="h-52 w-52 my-4" />
</p> </p>
) )
) : contentDocument.length > 0 ? ( ) : contentDocument.length > 0 ? (
@ -588,7 +589,7 @@ const Galery = (props: any) => {
</div> </div>
) : ( ) : (
<p className="flex items-center justify-center"> <p className="flex items-center justify-center">
<img src="/assets/empty-data.png" alt="empty" className="h-52 w-52 my-4" /> <Image width={1920} height={1080} src="/assets/empty-data.png" alt="empty" className="h-52 w-52 my-4" />
</p> </p>
)} )}
</div> </div>

9
app/[locale]/(public)/content-management/galery/page.tsx
View File

@ -20,6 +20,7 @@ import { Input } from "@/components/ui/input";
import { Button } from "@/components/ui/button"; import { Button } from "@/components/ui/button";
import { sendMediaUploadToEmail } from "@/service/media-tracking/media-tracking"; import { sendMediaUploadToEmail } from "@/service/media-tracking/media-tracking";
import ImageBlurry from "@/components/ui/image-blurry"; import ImageBlurry from "@/components/ui/image-blurry";
import Image from "next/image";
const Galery = (props: any) => { const Galery = (props: any) => {
const [profile, setProfile] = useState<any>(); const [profile, setProfile] = useState<any>();
@ -382,7 +383,7 @@ const Galery = (props: any) => {
</div> </div>
) : ( ) : (
<p className="flex items-center justify-center"> <p className="flex items-center justify-center">
<img src="/assets/empty-data.png" alt="empty" className="h-52 w-52 my-4" /> <Image width={1920} height={1080} src="/assets/empty-data.png" alt="empty" className="h-52 w-52 my-4" />
</p> </p>
) )
) : selectedTab == "audio" ? ( ) : selectedTab == "audio" ? (
@ -460,7 +461,7 @@ const Galery = (props: any) => {
</div> </div>
) : ( ) : (
<p className="flex items-center justify-center"> <p className="flex items-center justify-center">
<img src="/assets/empty-data.png" alt="empty" className="h-52 w-52 my-4" /> <Image width={1920} height={1080} src="/assets/empty-data.png" alt="empty" className="h-52 w-52 my-4" />
</p> </p>
) )
) : selectedTab == "image" ? ( ) : selectedTab == "image" ? (
@ -521,7 +522,7 @@ const Galery = (props: any) => {
</div> </div>
) : ( ) : (
<p className="flex items-center justify-center"> <p className="flex items-center justify-center">
<img src="/assets/empty-data.png" alt="empty" className="h-52 w-52 my-4" /> <Image width={1920} height={1080} src="/assets/empty-data.png" alt="empty" className="h-52 w-52 my-4" />
</p> </p>
) )
) : contentDocument.length > 0 ? ( ) : contentDocument.length > 0 ? (
@ -592,7 +593,7 @@ const Galery = (props: any) => {
</div> </div>
) : ( ) : (
<p className="flex items-center justify-center"> <p className="flex items-center justify-center">
<img src="/assets/empty-data.png" alt="empty" className="h-52 w-52 my-4" /> <Image width={1920} height={1080} src="/assets/empty-data.png" alt="empty" className="h-52 w-52 my-4" />
</p> </p>
)} )}
</div> </div>

3
app/[locale]/(public)/content-management/rewrite/page.tsx
View File

@ -17,6 +17,7 @@ import { Input } from "@/components/ui/input";
import { Button } from "@/components/ui/button"; import { Button } from "@/components/ui/button";
import { sendMediaUploadToEmail } from "@/service/media-tracking/media-tracking"; import { sendMediaUploadToEmail } from "@/service/media-tracking/media-tracking";
import ImageBlurry from "@/components/ui/image-blurry"; import ImageBlurry from "@/components/ui/image-blurry";
import Image from "next/image";
const page = () => { const page = () => {
const [, setProfile] = useState(); const [, setProfile] = useState();
@ -259,7 +260,7 @@ const page = () => {
</div> </div>
) : ( ) : (
<p className="flex items-center justify-center"> <p className="flex items-center justify-center">
<img src="/assets/empty-data.png" alt="empty" className="h-52 w-52 my-4" /> <Image width={1920} height={1080} src="/assets/empty-data.png" alt="empty" className="h-52 w-52 my-4" />
</p> </p>
)} )}
</div> </div>

11
app/[locale]/(public)/image/detail/[slug]/page.tsx
View File

@ -20,6 +20,7 @@ import Swal from "sweetalert2";
import parse from "html-react-parser"; import parse from "html-react-parser";
import { Skeleton } from "@/components/ui/skeleton"; import { Skeleton } from "@/components/ui/skeleton";
import { useTranslations } from "next-intl"; import { useTranslations } from "next-intl";
import Image from "next/image";
const DetailInfo = () => { const DetailInfo = () => {
const MySwal = withReactContent(Swal); const MySwal = withReactContent(Swal);
@ -444,7 +445,7 @@ const DetailInfo = () => {
</div> </div>
) : ( ) : (
<div className="relative"> <div className="relative">
<img src={detailDataImage?.files[selectedImage]?.url} alt="Main" className="rounded-lg w-auto h-fit" /> <Image width={2560} height={1440} src={detailDataImage?.files[selectedImage]?.url} alt="Main" className="rounded-lg w-auto h-fit" />
<div className="absolute top-4 left-4"></div> <div className="absolute top-4 left-4"></div>
</div> </div>
)} )}
@ -460,7 +461,7 @@ const DetailInfo = () => {
<div className="py-4 flex flex-row gap-3"> <div className="py-4 flex flex-row gap-3">
{detailDataImage?.files?.map((file: any, index: number) => ( {detailDataImage?.files?.map((file: any, index: number) => (
<a onClick={() => setSelectedImage(index)} key={file?.id}> <a onClick={() => setSelectedImage(index)} key={file?.id}>
<img src={file?.url} className="w-[120px] h-[90px] object-cover rounded-md cursor-pointer hover:ring-2 hover:ring-red-600" /> <Image width={1920} height={1080} alt="image-small" src={file?.url} className="w-[120px] h-[90px] object-cover rounded-md cursor-pointer hover:ring-2 hover:ring-red-600" />
</a> </a>
))} ))}
</div> </div>
@ -614,7 +615,7 @@ const DetailInfo = () => {
{listSuggestion?.map((data: any) => ( {listSuggestion?.map((data: any) => (
<div className="flex flex-col"> <div className="flex flex-col">
<div className="flex flex-row mt-2 px-4 lg:px-14"> <div className="flex flex-row mt-2 px-4 lg:px-14">
<img src={data?.suggestionFrom?.profilePictureUrl} className="h-12 lg:h-16 w-12 lg:w-16 mr-2" onError={addDefaultProfile} alt="" /> <Image width={1080} height={1080} src={data?.suggestionFrom?.profilePictureUrl} className="h-12 lg:h-16 w-12 lg:w-16 mr-2" onError={addDefaultProfile} alt="" />
<div className="border border-slate-300 w-full p-2 lg:p-4 bg-white gap-1"> <div className="border border-slate-300 w-full p-2 lg:p-4 bg-white gap-1">
<p className="text-slate-500 text-sm lg:text-base border-b-2 border-slate-200 mb-2"> <p className="text-slate-500 text-sm lg:text-base border-b-2 border-slate-200 mb-2">
{Number(data.suggestionFrom?.roleId) == 2 || Number(data.suggestionFrom?.roleId) == 3 || Number(data.suggestionFrom?.roleId) == 4 ? "HUMAS POLRI" : data.suggestionFrom?.fullname} {Number(data.suggestionFrom?.roleId) == 2 || Number(data.suggestionFrom?.roleId) == 3 || Number(data.suggestionFrom?.roleId) == 4 ? "HUMAS POLRI" : data.suggestionFrom?.fullname}
@ -663,7 +664,7 @@ const DetailInfo = () => {
? data.children?.map((child1: any) => ( ? data.children?.map((child1: any) => (
<div className="flex flex-col"> <div className="flex flex-col">
<div className="flex flex-row mt-2 px-4 lg:pr-14 pl-16 lg:pl-32"> <div className="flex flex-row mt-2 px-4 lg:pr-14 pl-16 lg:pl-32">
<img src={child1.suggestionFrom?.profilePictureUrl} onError={addDefaultProfile} alt="" className="h-10 lg:h-16 w-10 lg:w-16 mr-2" /> <Image width={1080} height={1080} src={child1.suggestionFrom?.profilePictureUrl} onError={addDefaultProfile} alt="" className="h-10 lg:h-16 w-10 lg:w-16 mr-2" />
<div className="border border-slate-300 w-full p-2 lg:p-4 bg-white gap-1"> <div className="border border-slate-300 w-full p-2 lg:p-4 bg-white gap-1">
<p className="text-slate-500 text-sm lg:text-base border-b-2 border-slate-200 mb-2"> <p className="text-slate-500 text-sm lg:text-base border-b-2 border-slate-200 mb-2">
{" "} {" "}
@ -718,7 +719,7 @@ const DetailInfo = () => {
? child1.children?.map((child2: any) => ( ? child1.children?.map((child2: any) => (
<div className=""> <div className="">
<div className="flex flex-row mt-2 px-4 lg:pr-14 pl-28 lg:pl-48"> <div className="flex flex-row mt-2 px-4 lg:pr-14 pl-28 lg:pl-48">
<img src={child2.suggestionFrom?.profilePictureUrl} className="h-9 lg:h-16 w-9 lg:w-16 mr-2" onError={addDefaultProfile} alt="" /> <Image width={1080} height={1080} src={child2.suggestionFrom?.profilePictureUrl} className="h-9 lg:h-16 w-9 lg:w-16 mr-2" onError={addDefaultProfile} alt="" />
<div className="border border-slate-300 w-full p-2 lg:p-4 bg-white gap-1"> <div className="border border-slate-300 w-full p-2 lg:p-4 bg-white gap-1">
<p className="text-slate-500 text-sm lg:text-base border-b-2 border-slate-200 mb-2"> <p className="text-slate-500 text-sm lg:text-base border-b-2 border-slate-200 mb-2">
{" "} {" "}

3
app/[locale]/(public)/image/filter/page.tsx
View File

@ -17,6 +17,7 @@ import { close, loading } from "@/config/swal";
import { useTranslations } from "next-intl"; import { useTranslations } from "next-intl";
import ImageBlurry from "@/components/ui/image-blurry"; import ImageBlurry from "@/components/ui/image-blurry";
import { Skeleton } from "@/components/ui/skeleton"; import { Skeleton } from "@/components/ui/skeleton";
import Image from "next/image";
const columns: ColumnDef<any>[] = [ const columns: ColumnDef<any>[] = [
{ {
@ -537,7 +538,7 @@ const FilterPage = () => {
</div> </div>
) : ( ) : (
<p className="flex items-center justify-center text-black"> <p className="flex items-center justify-center text-black">
<img src="/assets/empty-data.png" alt="empty" className="h-60 w-60 my-4" /> <Image width={1920} height={1080} src="/assets/empty-data.png" alt="empty" className="h-60 w-60 my-4" />
</p> </p>
)} )}
</> </>

11
app/[locale]/(public)/indeks/detail/[slug]/page.tsx
View File

@ -11,6 +11,7 @@ import { getCookiesDecrypt } from "@/lib/utils";
import { close, loading } from "@/config/swal"; import { close, loading } from "@/config/swal";
import { Input } from "@/components/ui/input"; import { Input } from "@/components/ui/input";
import { useTranslations } from "next-intl"; import { useTranslations } from "next-intl";
import Image from "next/image";
const IndeksDetail = () => { const IndeksDetail = () => {
const searchParams = useSearchParams(); const searchParams = useSearchParams();
@ -161,7 +162,7 @@ const IndeksDetail = () => {
</div> </div>
{/* Gambar Utama */} {/* Gambar Utama */}
<div className="flex items-center justify-center"> <div className="flex items-center justify-center">
<img src={indeksData?.thumbnailLink} alt="Main" className="h-fit lg:h-[550px] w-full rounded-lg" /> <Image width={2560} height={1440} src={indeksData?.thumbnailLink} alt="Main" className="h-fit lg:h-[550px] w-full rounded-lg" />
</div> </div>
{/* Footer Informasi */} {/* Footer Informasi */}
<div className="text-gray-500 flex border-t mt-4"> <div className="text-gray-500 flex border-t mt-4">
@ -195,7 +196,7 @@ const IndeksDetail = () => {
{listComments?.map((data: any) => ( {listComments?.map((data: any) => (
<div className="flex flex-col"> <div className="flex flex-col">
<div className="flex flex-row mt-2 px-4 lg:px-14"> <div className="flex flex-row mt-2 px-4 lg:px-14">
<img className="h-10 lg:h-20 w-10 lg:w-20" src="/assets/img/user-avatar-yellow.svg" alt="#" /> <Image width={512} height={512} className="h-10 lg:h-20 w-10 lg:w-20" src="/assets/img/user-avatar-yellow.svg" alt="#" />
<div className="border border-slate-300 w-full p-4 bg-white gap-1"> <div className="border border-slate-300 w-full p-4 bg-white gap-1">
<p className="flex justify-between text-sm text-slate-500 lg:text-base border-b-2 border-slate-200 mb-2"> <p className="flex justify-between text-sm text-slate-500 lg:text-base border-b-2 border-slate-200 mb-2">
<b>{Number(data.commentFrom?.roleId) == 2 || Number(data.commentFrom?.roleId) == 3 || Number(data.commentFrom?.roleId) == 4 ? "HUMAS POLRI" : data.commentFrom?.fullname}</b> <b>{Number(data.commentFrom?.roleId) == 2 || Number(data.commentFrom?.roleId) == 3 || Number(data.commentFrom?.roleId) == 4 ? "HUMAS POLRI" : data.commentFrom?.fullname}</b>
@ -233,7 +234,7 @@ const IndeksDetail = () => {
? data.children?.map((child1: any) => ( ? data.children?.map((child1: any) => (
<div className="flex flex-col"> <div className="flex flex-col">
<div className="flex flex-row mt-2 px-4 lg:pr-14 pl-12 lg:pl-32"> <div className="flex flex-row mt-2 px-4 lg:pr-14 pl-12 lg:pl-32">
<img className="h-10 lg:h-20 w-10 lg:w-20" src="/assets/img/user-avatar-yellow.svg" alt="#" /> <Image width={512} height={512} className="h-10 lg:h-20 w-10 lg:w-20" src="/assets/img/user-avatar-yellow.svg" alt="#" />
<div className="border border-slate-300 w-full p-4 bg-white gap-1"> <div className="border border-slate-300 w-full p-4 bg-white gap-1">
<p className="flex justify-between text-slate-500 text-sm lg:text-base border-b-2 border-slate-200 mb-2"> <p className="flex justify-between text-slate-500 text-sm lg:text-base border-b-2 border-slate-200 mb-2">
<b>{Number(child1.commentFrom?.roleId) == 2 || Number(child1.commentFrom?.roleId) == 3 || Number(child1.commentFrom?.roleId) == 4 ? "HUMAS POLRI" : child1.commentFrom?.fullname}</b> <b>{Number(child1.commentFrom?.roleId) == 2 || Number(child1.commentFrom?.roleId) == 3 || Number(child1.commentFrom?.roleId) == 4 ? "HUMAS POLRI" : child1.commentFrom?.fullname}</b>
@ -273,7 +274,7 @@ const IndeksDetail = () => {
? child1.children?.map((child2: any) => ( ? child1.children?.map((child2: any) => (
<div className="flex flex-col"> <div className="flex flex-col">
<div className="flex flex-row mt-2 px-4 lg:pr-14 pl-20 lg:pl-48"> <div className="flex flex-row mt-2 px-4 lg:pr-14 pl-20 lg:pl-48">
<img className="h-10 lg:h-20 w-10 lg:w-20" src="/assets/img/user-avatar-yellow.svg" alt="#" /> <Image width={512} height={512} className="h-10 lg:h-20 w-10 lg:w-20" src="/assets/img/user-avatar-yellow.svg" alt="#" />
<div className="border border-slate-300 w-full p-4 bg-white gap-2"> <div className="border border-slate-300 w-full p-4 bg-white gap-2">
<p className="flex justify-between text-slate-500 text-xs lg:text-base border-b-2 border-slate-200 mb-2"> <p className="flex justify-between text-slate-500 text-xs lg:text-base border-b-2 border-slate-200 mb-2">
<b>{Number(child2.commentFrom?.roleId) == 2 || Number(child2.commentFrom?.roleId) == 3 || Number(child2.commentFrom?.roleId) == 4 ? "HUMAS POLRI" : child2.commentFrom?.fullname}</b> <b>{Number(child2.commentFrom?.roleId) == 2 || Number(child2.commentFrom?.roleId) == 3 || Number(child2.commentFrom?.roleId) == 4 ? "HUMAS POLRI" : child2.commentFrom?.fullname}</b>
@ -328,7 +329,7 @@ const IndeksDetail = () => {
{indexData?.map((relate: any) => ( {indexData?.map((relate: any) => (
<CarouselItem key={relate?.id} className="md:basis-1/2 lg:basis-1/3"> <CarouselItem key={relate?.id} className="md:basis-1/2 lg:basis-1/3">
<Link href={`/indeks/detail/${relate?.slug}`} className="relative group overflow-hidden shadow-md hover:shadow-lg"> <Link href={`/indeks/detail/${relate?.slug}`} className="relative group overflow-hidden shadow-md hover:shadow-lg">
<img src={relate?.thumbnailLink} className="w-full rounded-lg h-40 lg:h-60 object-cover group-hover:scale-100 transition-transform duration-300" /> <Image alt="" width={2560} height={1440} src={relate?.thumbnailLink} className="w-full rounded-lg h-40 lg:h-60 object-cover group-hover:scale-100 transition-transform duration-300" />
<div className="absolute bottom-0 left-0 right-0 bg-gray-600 border-l-4 border-[#bb3523] rounded-lg backdrop-blur-sm text-white p-2"> <div className="absolute bottom-0 left-0 right-0 bg-gray-600 border-l-4 border-[#bb3523] rounded-lg backdrop-blur-sm text-white p-2">
<span className="text-white bg-[#bb3523] rounded-md w-full h-full font-semibold uppercase text-sm px-4 py-1">{relate?.categoryName}</span> <span className="text-white bg-[#bb3523] rounded-md w-full h-full font-semibold uppercase text-sm px-4 py-1">{relate?.categoryName}</span>
<h1 className="text-sm lg:text-lg mb-2 font-semibold h-5 hover:h-auto truncate hover:whitespace-normal hover:overflow-visible">{relate?.title}</h1> <h1 className="text-sm lg:text-lg mb-2 font-semibold h-5 hover:h-auto truncate hover:whitespace-normal hover:overflow-visible">{relate?.title}</h1>

11
app/[locale]/(public)/indeks/page.tsx
View File

@ -4,6 +4,7 @@ import { Skeleton } from "@/components/ui/skeleton";
import { Link } from "@/i18n/routing"; import { Link } from "@/i18n/routing";
import { getIndeksData } from "@/service/landing/landing"; import { getIndeksData } from "@/service/landing/landing";
import { formatDateToIndonesian } from "@/utils/globals"; import { formatDateToIndonesian } from "@/utils/globals";
import Image from "next/image";
import { usePathname } from "next/navigation"; import { usePathname } from "next/navigation";
import React, { useEffect, useState } from "react"; import React, { useEffect, useState } from "react";
@ -53,14 +54,14 @@ const Indeks: React.FC = () => {
(indeks: any, index: number) => (indeks: any, index: number) =>
index == count && ( index == count && (
<div key={indeks?.id} className="relative h-[310px] lg:h-[435px]"> <div key={indeks?.id} className="relative h-[310px] lg:h-[435px]">
<img src={indeks?.thumbnailLink} alt="image" className="w-full h-[310px] lg:h-[435px] rounded-lg object-cover" /> <Image width={2560} height={1440} src={indeks?.thumbnailLink} alt="image" className="w-full h-[310px] lg:h-[435px] rounded-lg object-cover" />
<div className="absolute bottom-0 left-0 right-0 bg-transparent backdrop-blur-sm text-white p-4 rounded-b-lg"> <div className="absolute bottom-0 left-0 right-0 bg-transparent backdrop-blur-sm text-white p-4 rounded-b-lg">
<span className="text-white bg-[#bb3523] rounded-md w-full h-full font-semibold uppercase text-xs px-2 py-1">{indeks?.categoryName}</span> <span className="text-white bg-[#bb3523] rounded-md w-full h-full font-semibold uppercase text-xs px-2 py-1">{indeks?.categoryName}</span>
<Link href={`/indeks/detail/${indeks?.slug}`}> <Link href={`/indeks/detail/${indeks?.slug}`}>
<h2 className="text-2xl font-bold mt-2">{indeks?.title}</h2> <h2 className="text-2xl font-bold mt-2">{indeks?.title}</h2>
</Link> </Link>
<p className="text-xs flex flex-row items-center gap-1 mt-1 ml-2"> <p className="text-xs flex flex-row items-center gap-1 mt-1">
{formatDateToIndonesian(new Date(indeks?.createdAt))} {indeks?.timezone ? indeks?.timezone : "WIB"}|{" "} {formatDateToIndonesian(new Date(indeks?.createdAt))} {indeks?.timezone ? indeks?.timezone : "WIB"} | {" "}
<svg xmlns="http://www.w3.org/2000/svg" width="1.2em" height="1.2em" viewBox="0 0 24 24"> <svg xmlns="http://www.w3.org/2000/svg" width="1.2em" height="1.2em" viewBox="0 0 24 24">
<path <path
fill="currentColor" fill="currentColor"
@ -91,7 +92,7 @@ const Indeks: React.FC = () => {
(indeksRight: any, index: number) => (indeksRight: any, index: number) =>
(index == count + 1 || index == count + 2) && ( (index == count + 1 || index == count + 2) && (
<div key={indeksRight?.id} className="relative h-[310px] lg:h-[215px]"> <div key={indeksRight?.id} className="relative h-[310px] lg:h-[215px]">
<img src={indeksRight?.thumbnailLink} alt="image" className="w-full h-[310px] lg:h-[215px] rounded-lg " /> <Image width={1920} height={1080} src={indeksRight?.thumbnailLink} alt="image" className="w-full h-[310px] lg:h-[215px] rounded-lg " />
<div className="absolute bottom-0 left-0 right-0 bg-transparent backdrop-blur-sm text-white p-4 rounded-b-lg"> <div className="absolute bottom-0 left-0 right-0 bg-transparent backdrop-blur-sm text-white p-4 rounded-b-lg">
<span className="text-white bg-[#bb3523] rounded-md w-full h-full font-semibold uppercase text-xs px-2 py-1">{indeksRight?.categoryName}</span> <span className="text-white bg-[#bb3523] rounded-md w-full h-full font-semibold uppercase text-xs px-2 py-1">{indeksRight?.categoryName}</span>
<Link href={`/indeks/detail/${indeksRight?.slug}`}> <Link href={`/indeks/detail/${indeksRight?.slug}`}>
@ -148,7 +149,7 @@ const Indeks: React.FC = () => {
(indeksBottom: any, index: number) => (indeksBottom: any, index: number) =>
index < 3 && ( index < 3 && (
<div key={indeksBottom?.id} className="flex flex-col md:flex-row items-start p-4 gap-4"> <div key={indeksBottom?.id} className="flex flex-col md:flex-row items-start p-4 gap-4">
<img src={indeksBottom?.thumbnailLink} alt="" className="h-40 object-cover rounded-lg w-full lg:w-full lg:h-[300px]" /> <Image width={2560} height={1440} src={indeksBottom?.thumbnailLink} alt="" className="h-40 object-cover rounded-lg w-full lg:w-full lg:h-[300px]" />
<div className="flex flex-col justify-between w-full"> <div className="flex flex-col justify-between w-full">
<p className="text-sm">{indeksBottom?.date}</p> <p className="text-sm">{indeksBottom?.date}</p>
<Link href={`/indeks/detail/${indeksBottom?.slug}`} className="text-2xl font-semibold text-gray-800"> <Link href={`/indeks/detail/${indeksBottom?.slug}`} className="text-2xl font-semibold text-gray-800">

41
app/[locale]/(public)/profile/change-profile/page.tsx
View File

@ -1,5 +1,6 @@
"use client"; "use client";
import { Link } from "@/components/navigation"; import { Link } from "@/components/navigation";
import Image from "next/image";
import React, { useState } from "react"; import React, { useState } from "react";
const ChangeProfile: React.FC = () => { const ChangeProfile: React.FC = () => {
@ -36,55 +37,29 @@ const ChangeProfile: React.FC = () => {
<div className="flex justify-center gap-4 mb-8"> <div className="flex justify-center gap-4 mb-8">
<Link href={"/profile"}> <Link href={"/profile"}>
<button className="border border-red-700 text-red-700 px-4 py-2 rounded"> <button className="border border-red-700 text-red-700 px-4 py-2 rounded">User Profile</button>
User Profile
</button>
</Link> </Link>
<Link href={"/profile/change-profile"}> <Link href={"/profile/change-profile"}>
<button className="bg-red-700 text-white px-4 py-2 rounded"> <button className="bg-red-700 text-white px-4 py-2 rounded">Ubah Foto</button>
Ubah Foto
</button>
</Link> </Link>
<Link href={"/profile/change-password"}> <Link href={"/profile/change-password"}>
<button className="border border-red-700 text-red-700 px-4 py-2 rounded"> <button className="border border-red-700 text-red-700 px-4 py-2 rounded">Ubah Password</button>
Ubah Password
</button>
</Link> </Link>
</div> </div>
<div className="w-80 mx-auto bg-gray-900 text-white shadow-md p-8 rounded"> <div className="w-80 mx-auto bg-gray-900 text-white shadow-md p-8 rounded">
<div className="flex justify-center mb-6"> <div className="flex justify-center mb-6">
<div className="w-40 h-40 rounded-full border border-gray-300 flex items-center justify-center"> <div className="w-40 h-40 rounded-full border border-gray-300 flex items-center justify-center">
{selectedImage ? ( {selectedImage ? <Image width={1920} height={1080} src={URL.createObjectURL(selectedImage)} alt="Preview" className="w-full h-full rounded-full object-cover" /> : <span className="text-gray-500">No Image</span>}
<img
src={URL.createObjectURL(selectedImage)}
alt="Preview"
className="w-full h-full rounded-full object-cover"
/>
) : (
<span className="text-gray-500">No Image</span>
)}
</div> </div>
</div> </div>
<div className="flex justify-center gap-4"> <div className="flex justify-center gap-4">
<input <input type="file" id="upload" accept="image/*" className="hidden" onChange={handleImageChange} />
type="file" <label htmlFor="upload" className="bg-blue-600 text-white px-4 py-2 rounded cursor-pointer">
id="upload"
accept="image/*"
className="hidden"
onChange={handleImageChange}
/>
<label
htmlFor="upload"
className="bg-blue-600 text-white px-4 py-2 rounded cursor-pointer"
>
Ganti Foto Ganti Foto
</label> </label>
<button <button onClick={handleDelete} className="border border-red-700 text-red-700 px-4 py-2 rounded">
onClick={handleDelete}
className="border border-red-700 text-red-700 px-4 py-2 rounded"
>
Hapus Foto Hapus Foto
</button> </button>
</div> </div>

7
app/[locale]/(public)/video/detail/[slug]/page.tsx
View File

@ -20,6 +20,7 @@ import withReactContent from "sweetalert2-react-content";
import Swal from "sweetalert2"; import Swal from "sweetalert2";
import parse from "html-react-parser"; import parse from "html-react-parser";
import { useTranslations } from "next-intl"; import { useTranslations } from "next-intl";
import Image from "next/image";
const DetailVideo = () => { const DetailVideo = () => {
const [selectedSize, setSelectedSize] = useState<string>("L"); const [selectedSize, setSelectedSize] = useState<string>("L");
@ -586,7 +587,7 @@ const DetailVideo = () => {
{listSuggestion?.map((data: any) => ( {listSuggestion?.map((data: any) => (
<div className="flex flex-col"> <div className="flex flex-col">
<div className="flex flex-row mt-2 px-4 lg:px-14"> <div className="flex flex-row mt-2 px-4 lg:px-14">
<img src={data?.suggestionFrom?.profilePictureUrl} className="h-12 lg:h-16 w-12 lg:w-16 mr-2" onError={addDefaultProfile} alt="" /> <Image width={1080} height={1080} src={data?.suggestionFrom?.profilePictureUrl} className="h-12 lg:h-16 w-12 lg:w-16 mr-2" onError={addDefaultProfile} alt="" />
<div className="border border-slate-300 w-full p-2 lg:p-4 bg-white gap-1"> <div className="border border-slate-300 w-full p-2 lg:p-4 bg-white gap-1">
<p className="text-slate-500 text-sm lg:text-base border-b-2 border-slate-200 mb-2"> <p className="text-slate-500 text-sm lg:text-base border-b-2 border-slate-200 mb-2">
{Number(data.suggestionFrom?.roleId) == 2 || Number(data.suggestionFrom?.roleId) == 3 || Number(data.suggestionFrom?.roleId) == 4 ? "HUMAS POLRI" : data.suggestionFrom?.fullname} {Number(data.suggestionFrom?.roleId) == 2 || Number(data.suggestionFrom?.roleId) == 3 || Number(data.suggestionFrom?.roleId) == 4 ? "HUMAS POLRI" : data.suggestionFrom?.fullname}
@ -635,7 +636,7 @@ const DetailVideo = () => {
? data.children?.map((child1: any) => ( ? data.children?.map((child1: any) => (
<div className="flex flex-col"> <div className="flex flex-col">
<div className="flex flex-row mt-2 px-4 lg:pr-14 pl-16 lg:pl-32"> <div className="flex flex-row mt-2 px-4 lg:pr-14 pl-16 lg:pl-32">
<img src={child1.suggestionFrom?.profilePictureUrl} onError={addDefaultProfile} alt="" className="h-10 lg:h-16 w-10 lg:w-16 mr-2" /> <Image width={1080} height={1080} src={child1.suggestionFrom?.profilePictureUrl} onError={addDefaultProfile} alt="" className="h-10 lg:h-16 w-10 lg:w-16 mr-2" />
<div className="border border-slate-300 w-full p-2 lg:p-4 bg-white gap-1"> <div className="border border-slate-300 w-full p-2 lg:p-4 bg-white gap-1">
<p className="text-slate-500 text-sm lg:text-base border-b-2 border-slate-200 mb-2"> <p className="text-slate-500 text-sm lg:text-base border-b-2 border-slate-200 mb-2">
{" "} {" "}
@ -689,7 +690,7 @@ const DetailVideo = () => {
? child1.children?.map((child2: any) => ( ? child1.children?.map((child2: any) => (
<div className=""> <div className="">
<div className="flex flex-row mt-2 px-4 lg:pr-14 pl-28 lg:pl-48"> <div className="flex flex-row mt-2 px-4 lg:pr-14 pl-28 lg:pl-48">
<img src={child2.suggestionFrom?.profilePictureUrl} className="h-9 lg:h-16 w-9 lg:w-16 mr-2" onError={addDefaultProfile} alt="" /> <Image width={1080} height={1080} src={child2.suggestionFrom?.profilePictureUrl} className="h-9 lg:h-16 w-9 lg:w-16 mr-2" onError={addDefaultProfile} alt="" />
<div className="border border-slate-300 w-full p-2 lg:p-4 bg-white gap-1"> <div className="border border-slate-300 w-full p-2 lg:p-4 bg-white gap-1">
<p className="text-slate-500 text-sm lg:text-base border-b-2 border-slate-200 mb-2"> <p className="text-slate-500 text-sm lg:text-base border-b-2 border-slate-200 mb-2">
{" "} {" "}

3
app/[locale]/(public)/video/filter/page.tsx
View File

@ -17,6 +17,7 @@ import { close, loading } from "@/config/swal";
import { useTranslations } from "next-intl"; import { useTranslations } from "next-intl";
import ImageBlurry from "@/components/ui/image-blurry"; import ImageBlurry from "@/components/ui/image-blurry";
import { Skeleton } from "@/components/ui/skeleton"; import { Skeleton } from "@/components/ui/skeleton";
import Image from "next/image";
const columns: ColumnDef<any>[] = [ const columns: ColumnDef<any>[] = [
{ {
@ -562,7 +563,7 @@ const FilterPage = () => {
</div> </div>
) : ( ) : (
<p className="flex items-center justify-center"> <p className="flex items-center justify-center">
<img src="/assets/empty-data.png" alt="empty" className="h-60 w-60 my-4" /> <Image width={1920} height={1080} src="/assets/empty-data.png" alt="empty" className="h-60 w-60 my-4" />
</p> </p>
)} )}
</> </>

5
components/landing-page/content-category.tsx
View File

@ -6,6 +6,7 @@ import { Reveal } from "./Reveal";
import { useTranslations } from "next-intl"; import { useTranslations } from "next-intl";
import { usePathname } from "next/navigation"; import { usePathname } from "next/navigation";
import { useParams } from "next/navigation"; import { useParams } from "next/navigation";
import Image from "next/image";
const ContentCategory = (props: { group?: string }) => { const ContentCategory = (props: { group?: string }) => {
const [categories, setCategories] = useState<any>(); const [categories, setCategories] = useState<any>();
@ -55,7 +56,7 @@ const ContentCategory = (props: { group?: string }) => {
!seeAllValue ? ( !seeAllValue ? (
index < 4 ? ( index < 4 ? (
<Link key={category?.id} href={`all/filter?category=${category?.id}`} className="relative group rounded-md overflow-hidden shadow-md hover:shadow-lg"> <Link key={category?.id} href={`all/filter?category=${category?.id}`} className="relative group rounded-md overflow-hidden shadow-md hover:shadow-lg">
<img src={category?.thumbnailLink} className="w-full h-48 sm:h-40 object-cover group-hover:scale-110 transition-transform duration-300" /> <Image alt="category" width={2560} height={1440} src={category?.thumbnailLink} className="w-full h-48 sm:h-40 object-cover group-hover:scale-110 transition-transform duration-300" />
<div className="absolute bottom-0 rounded-lg left-0 right-0 bg-gray-400 border-l-4 mb-4 border-[#bb3523] text-white p-2"> <div className="absolute bottom-0 rounded-lg left-0 right-0 bg-gray-400 border-l-4 mb-4 border-[#bb3523] text-white p-2">
<h3 className="text-sm font-semibold truncate">{category?.name}</h3> <h3 className="text-sm font-semibold truncate">{category?.name}</h3>
</div> </div>
@ -65,7 +66,7 @@ const ContentCategory = (props: { group?: string }) => {
) )
) : ( ) : (
<Link key={category?.id} href={`all/filter?category=${category?.id}`} className="relative group rounded-md overflow-hidden shadow-md hover:shadow-lg"> <Link key={category?.id} href={`all/filter?category=${category?.id}`} className="relative group rounded-md overflow-hidden shadow-md hover:shadow-lg">
<img src={category?.thumbnailLink} className="w-full h-48 sm:h-40 object-cover group-hover:scale-110 transition-transform duration-300" /> <Image alt="category" width={2560} height={1440} src={category?.thumbnailLink} className="w-full h-48 sm:h-40 object-cover group-hover:scale-110 transition-transform duration-300" />
<div className="absolute bottom-0 left-0 right-0 bg-gray-400 border-l-4 mb-4 border-[#bb3523] rounded-lg text-white p-2"> <div className="absolute bottom-0 left-0 right-0 bg-gray-400 border-l-4 mb-4 border-[#bb3523] rounded-lg text-white p-2">
<h3 className="text-sm font-semibold truncate">{category?.name}</h3> <h3 className="text-sm font-semibold truncate">{category?.name}</h3>
</div> </div>

5
components/landing-page/hero.tsx
View File

@ -7,6 +7,7 @@ import Link from "next/link";
import { useParams, usePathname, useRouter } from "next/navigation"; import { useParams, usePathname, useRouter } from "next/navigation";
import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from "@/components/ui/carousel"; import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from "@/components/ui/carousel";
import { Skeleton } from "../ui/skeleton"; import { Skeleton } from "../ui/skeleton";
import Image from "next/image";
const Hero: React.FC = () => { const Hero: React.FC = () => {
const router = useRouter(); const router = useRouter();
@ -67,7 +68,7 @@ const Hero: React.FC = () => {
{heroData?.map((list: any) => ( {heroData?.map((list: any) => (
<CarouselItem key={list?.id}> <CarouselItem key={list?.id}>
<div className="relative h-[310px] lg:h-[420px]"> <div className="relative h-[310px] lg:h-[420px]">
<img src={list?.thumbnailLink} alt="Gambar Utama" className="w-full h-[310px] lg:h-[420px] rounded-lg object-cover" /> <Image src={list?.thumbnailLink} alt="gambar-utama" width={1920} height={1080} className="w-full h-[310px] lg:h-[420px] rounded-lg object-cover" />
<div className="absolute bottom-0 left-0 right-0 bg-transparent backdrop-blur-sm text-black dark:text-white p-4 rounded-b-lg"> <div className="absolute bottom-0 left-0 right-0 bg-transparent backdrop-blur-sm text-black dark:text-white p-4 rounded-b-lg">
<span className="text-white bg-[#bb3523] rounded-md w-full h-full font-semibold uppercase text-xs px-2 py-1">{list?.categoryName}</span> <span className="text-white bg-[#bb3523] rounded-md w-full h-full font-semibold uppercase text-xs px-2 py-1">{list?.categoryName}</span>
<Link href={`${locale}/image/detail/${list?.slug}`}> <Link href={`${locale}/image/detail/${list?.slug}`}>
@ -138,7 +139,7 @@ const Hero: React.FC = () => {
{heroData?.map((item: any) => ( {heroData?.map((item: any) => (
<li key={item?.id} className="flex gap-4 flex-row lg:w-full "> <li key={item?.id} className="flex gap-4 flex-row lg:w-full ">
<div className="flex-shrink-0 w-24 rounded-lg"> <div className="flex-shrink-0 w-24 rounded-lg">
<img src={item?.thumbnailLink} alt={item?.title} className="w-full h-[73px] object-cover rounded-lg" /> <Image width={720} height={480} src={item?.thumbnailLink} alt={item?.title} className="w-full h-[73px] object-cover rounded-lg" />
</div> </div>
<div className="w-[280px] lg:w-auto"> <div className="w-[280px] lg:w-auto">
<span className="text-white bg-[#bb3523] px-4 py-1 rounded-lg flex text-[8px] font-bold uppercase w-fit">{item?.categoryName}</span> <span className="text-white bg-[#bb3523] px-4 py-1 rounded-lg flex text-[8px] font-bold uppercase w-fit">{item?.categoryName}</span>

22
components/landing-page/navbar.tsx
View File

@ -146,7 +146,7 @@ const Navbar = () => {
<div className="flex items-center justify-between px-4 lg:px-20 py-4 gap-3"> <div className="flex items-center justify-between px-4 lg:px-20 py-4 gap-3">
{/* Logo */} {/* Logo */}
<Link href={prefixPath} className="flex items-center"> <Link href={prefixPath} className="flex items-center">
<img src="/assets/mediahub-logo.gif" alt="Media Hub Logo" className="object-contain h-20" /> <Image src="/assets/mediahub-logo.gif" alt="Media Hub Logo" width={200} height={300} className="object-contain" />
</Link> </Link>
{/* Mobile Menu Toggle */} {/* Mobile Menu Toggle */}
@ -294,7 +294,7 @@ const Navbar = () => {
</Link> */} </Link> */}
<div className="flex items-center space-x-1 "> <div className="flex items-center space-x-1 ">
<a href="https://tvradio.polri.go.id/"> <a href="https://tvradio.polri.go.id/">
<img src="/assets/polriTv.png" className="object-contain h-10 flex-auto " /> <Image src="/assets/polriTv.png" width={100} height={120} alt="polritv" className="object-contain flex-auto " />
</a> </a>
</div> </div>
@ -417,7 +417,7 @@ const Navbar = () => {
{notifications?.map((list: any) => ( {notifications?.map((list: any) => (
<a className="flex flex-row" href={list.redirectUrl} key={list.id}> <a className="flex flex-row" href={list.redirectUrl} key={list.id}>
<div className="ml-4"> <div className="ml-4">
<img src="/assets/avatar-profile.png" alt="..." className="w-8 items-center mr-3" /> <Image src="/assets/avatar-profile.png" alt="avatar" width={5} height={10} className="items-center mr-3" />
</div> </div>
<div className="text-wrap text-left">{list?.message}</div> <div className="text-wrap text-left">{list?.message}</div>
<div> <div>
@ -441,7 +441,7 @@ const Navbar = () => {
{notificationsUpdate?.map((list: any) => ( {notificationsUpdate?.map((list: any) => (
<a className="flex flex-row" href={list.redirectUrl} key={list.id}> <a className="flex flex-row" href={list.redirectUrl} key={list.id}>
<div className="ml-4"> <div className="ml-4">
<img src="/assets/avatar-profile.png" alt="..." className="w-8 items-center mr-3" /> <Image src="/assets/avatar-profile.png" alt="..." width={5} height={10} className="w-8 items-center mr-3" />
</div> </div>
<div className=""> <div className="">
<div className="text-wrap text-left">{list?.message}</div> <div className="text-wrap text-left">{list?.message}</div>
@ -563,7 +563,7 @@ const Navbar = () => {
{notifications?.map((list: any) => ( {notifications?.map((list: any) => (
<a className="" href={list.redirectUrl} key={list.id}> <a className="" href={list.redirectUrl} key={list.id}>
<div className=""> <div className="">
<img src="/assets/avatar-profile.png" alt="..." className="" /> <Image src="/assets/avatar-profile.png" alt="..." width={5} height={10} />
</div> </div>
<div className=""> <div className="">
<div className="text-wrap text-left">{list?.message}</div> <div className="text-wrap text-left">{list?.message}</div>
@ -587,7 +587,7 @@ const Navbar = () => {
{notificationsUpdate?.map((list: any) => ( {notificationsUpdate?.map((list: any) => (
<a className="flex flex-row" href={list.redirectUrl} key={list.id}> <a className="flex flex-row" href={list.redirectUrl} key={list.id}>
<div className="ml-4"> <div className="ml-4">
<img src="/assets/avatar-profile.png" alt="..." className="w-8 items-center mr-3" /> <Image src="/assets/avatar-profile.png" alt="..." width={5} height={10} className="items-center mr-3" />
</div> </div>
<div className=""> <div className="">
<div className="text-wrap text-left">{list?.message}</div> <div className="text-wrap text-left">{list?.message}</div>
@ -834,7 +834,7 @@ const Navbar = () => {
</div> */} </div> */}
<div className="flex items-center space-x-1 mx-3 text-yellow-600 font-medium"> <div className="flex items-center space-x-1 mx-3 text-yellow-600 font-medium">
<a href="https://tvradio.polri.go.id/"> <a href="https://tvradio.polri.go.id/">
<img src="/assets/polriTv.png" className="object-contain h-11 flex items-center" /> <Image src="/assets/polriTv.png" width={100} height={120} alt="polritv" className="object-contain flex items-center" />
</a> </a>
</div> </div>
@ -989,7 +989,7 @@ const Navbar = () => {
{notifications?.map((list: any) => ( {notifications?.map((list: any) => (
<a className="flex flex-row" href={list.redirectUrl} key={list.id}> <a className="flex flex-row" href={list.redirectUrl} key={list.id}>
<div className="ml-4"> <div className="ml-4">
<img src="/assets/avatar-profile.png" alt="..." className="w-8 items-center mr-3" /> <Image width={5} height={10} src="/assets/avatar-profile.png" alt="..." className="items-center mr-3" />
</div> </div>
<div className="text-wrap text-left">{list?.message}</div> <div className="text-wrap text-left">{list?.message}</div>
<div> <div>
@ -1013,7 +1013,7 @@ const Navbar = () => {
{notificationsUpdate?.map((list: any) => ( {notificationsUpdate?.map((list: any) => (
<a className="flex flex-row" href={list.redirectUrl} key={list.id}> <a className="flex flex-row" href={list.redirectUrl} key={list.id}>
<div className="ml-4"> <div className="ml-4">
<img src="/assets/avatar-profile.png" alt="..." className="w-8 items-center mr-3" /> <Image width={5} height={10} src="/assets/avatar-profile.png" alt="..." className="items-center mr-3" />
</div> </div>
<div className=""> <div className="">
<div className="text-wrap text-left">{list?.message}</div> <div className="text-wrap text-left">{list?.message}</div>
@ -1135,7 +1135,7 @@ const Navbar = () => {
{notifications?.map((list: any) => ( {notifications?.map((list: any) => (
<a className="" href={list.redirectUrl} key={list.id}> <a className="" href={list.redirectUrl} key={list.id}>
<div className=""> <div className="">
<img src="/assets/avatar-profile.png" alt="..." className="" /> <Image width={5} height={10} src="/assets/avatar-profile.png" alt="..." />
</div> </div>
<div className=""> <div className="">
<div className="text-wrap text-left">{list?.message}</div> <div className="text-wrap text-left">{list?.message}</div>
@ -1159,7 +1159,7 @@ const Navbar = () => {
{notificationsUpdate?.map((list: any) => ( {notificationsUpdate?.map((list: any) => (
<a className="flex flex-row" href={list.redirectUrl} key={list.id}> <a className="flex flex-row" href={list.redirectUrl} key={list.id}>
<div className="ml-4"> <div className="ml-4">
<img src="/assets/avatar-profile.png" alt="..." className="w-8 items-center mr-3" /> <Image width={5} height={10} src="/assets/avatar-profile.png" alt="..." className="items-center mr-3" />
</div> </div>
<div className=""> <div className="">
<div className="text-wrap text-left">{list?.message}</div> <div className="text-wrap text-left">{list?.message}</div>

17
components/landing-page/new-content.tsx
View File

@ -11,6 +11,7 @@ import { Link } from "@/i18n/routing";
import { Reveal } from "./Reveal"; import { Reveal } from "./Reveal";
import { useTranslations } from "next-intl"; import { useTranslations } from "next-intl";
import { Skeleton } from "../ui/skeleton"; import { Skeleton } from "../ui/skeleton";
import Image from "next/image";
const NewContent = (props: { group: string; type: string }) => { const NewContent = (props: { group: string; type: string }) => {
const [newContent, setNewContent] = useState<any>(); const [newContent, setNewContent] = useState<any>();
@ -117,9 +118,9 @@ const NewContent = (props: { group: string; type: string }) => {
{newContent?.map((image: any) => ( {newContent?.map((image: any) => (
<CarouselItem key={image?.id} className="md:basis-1/2 lg:basis-1/3"> <CarouselItem key={image?.id} className="md:basis-1/2 lg:basis-1/3">
<Link href={`/image/detail/${image?.slug}`} className="relative group overflow-hidden shadow-md hover:shadow-lg"> <Link href={`/image/detail/${image?.slug}`} className="relative group overflow-hidden shadow-md hover:shadow-lg">
<img src={image?.thumbnailLink} className="w-full rounded-lg h-48 lg:h-60 object-cover group-hover:scale-100 transition-transform duration-300" /> <Image width={2560} height={1440} alt="image" src={image?.thumbnailLink} className="w-full rounded-lg h-48 lg:h-60 object-cover group-hover:scale-100 transition-transform duration-300" />
<div className="absolute bottom-0 left-0 right-0 bg-gray-600 border-l-4 border-[#bb3523] rounded-lg backdrop-blur-sm text-white p-2"> <div className="absolute bottom-0 left-0 right-0 bg-gray-600 border-l-4 border-[#bb3523] rounded-lg backdrop-blur-sm text-white p-2">
<h1 className="text-sm lg:text-lg mb-2 font-semibold h-5 hover:h-auto truncate hover:whitespace-normal hover:overflow-visible">{image?.title}</h1> <p className="text-sm lg:text-base mb-2 font-semibold h-6 hover:h-auto truncate hover:whitespace-normal hover:overflow-visible">{image?.title}</p>
<p className="flex flex-row items-center text-[10px] gap-2"> <p className="flex flex-row items-center text-[10px] gap-2">
{formatDateToIndonesian(new Date(image?.createdAt))} {image?.timezone ? image?.timezone : "WIB"} | <Icon icon="formkit:eye" width="15" height="15" /> {image.clickCount}{" "} {formatDateToIndonesian(new Date(image?.createdAt))} {image?.timezone ? image?.timezone : "WIB"} | <Icon icon="formkit:eye" width="15" height="15" /> {image.clickCount}{" "}
</p> </p>
@ -133,7 +134,7 @@ const NewContent = (props: { group: string; type: string }) => {
</Carousel> </Carousel>
) : ( ) : (
<p className="flex items-center justify-center"> <p className="flex items-center justify-center">
<img src="/assets/empty-data.png" alt="empty" className="h-52 w-52 my-4" /> <Image width={1920} height={1080} src="/assets/empty-data.png" alt="empty" className="h-52 w-52 my-4" />
</p> </p>
) )
) : selectedTab == "audio" ? ( ) : selectedTab == "audio" ? (
@ -171,7 +172,7 @@ const NewContent = (props: { group: string; type: string }) => {
</Carousel> </Carousel>
) : ( ) : (
<p className="flex items-center justify-center"> <p className="flex items-center justify-center">
<img src="/assets/empty-data.png" alt="empty" className="h-52 w-52 my-4" /> <Image width={1920} height={1080} src="/assets/empty-data.png" alt="empty" className="h-52 w-52 my-4" />
</p> </p>
) )
) : selectedTab == "video" ? ( ) : selectedTab == "video" ? (
@ -181,9 +182,9 @@ const NewContent = (props: { group: string; type: string }) => {
{newContent?.map((video: any) => ( {newContent?.map((video: any) => (
<CarouselItem key={video?.id} className="md:basis-1/2 lg:basis-1/3"> <CarouselItem key={video?.id} className="md:basis-1/2 lg:basis-1/3">
<Link href={`/video/detail/${video?.slug}`} className="relative group rounded-md overflow-hidden shadow-md hover:shadow-lg"> <Link href={`/video/detail/${video?.slug}`} className="relative group rounded-md overflow-hidden shadow-md hover:shadow-lg">
<img src={video?.thumbnailLink} className="w-full h-40 lg:h-60 object-cover rounded-lg group-hover:scale-100 transition-transform duration-300" /> <Image alt="video" width={2560} height={1440} src={video?.thumbnailLink} className="w-full h-40 lg:h-60 object-cover rounded-lg group-hover:scale-100 transition-transform duration-300" />
<div className="absolute bottom-0 rounded-lg left-0 right-0 border-l-4 border-[#bb3523] bg-gray-600 text-white p-2"> <div className="absolute bottom-0 rounded-lg left-0 right-0 border-l-4 border-[#bb3523] bg-gray-600 text-white p-2">
<h1 className="text-sm font-semibold h-5 hover:h-auto truncate hover:whitespace-normal hover:overflow-visible">{video?.title}</h1> <p className="text-sm lg:text-base mb-2 font-semibold h-6 hover:h-auto truncate hover:whitespace-normal hover:overflow-visible">{video?.title}</p>
<p className="flex flex-row items-center text-sm gap-2"> <p className="flex flex-row items-center text-sm gap-2">
{formatDateToIndonesian(new Date(video?.createdAt))} {video?.timezone ? video?.timezone : "WIB"}| <Icon icon="formkit:eye" width="15" height="15" /> {video?.clickCount}{" "} {formatDateToIndonesian(new Date(video?.createdAt))} {video?.timezone ? video?.timezone : "WIB"}| <Icon icon="formkit:eye" width="15" height="15" /> {video?.clickCount}{" "}
</p> </p>
@ -197,7 +198,7 @@ const NewContent = (props: { group: string; type: string }) => {
</Carousel> </Carousel>
) : ( ) : (
<p className="flex items-center justify-center"> <p className="flex items-center justify-center">
<img src="/assets/empty-data.png" alt="empty" className="h-52 w-52 my-4" /> <Image width={1920} height={1080} src="/assets/empty-data.png" alt="empty" className="h-52 w-52 my-4" />
</p> </p>
) )
) : newContent.length > 0 ? ( ) : newContent.length > 0 ? (
@ -241,7 +242,7 @@ const NewContent = (props: { group: string; type: string }) => {
</Carousel> </Carousel>
) : ( ) : (
<p className="flex items-center justify-center"> <p className="flex items-center justify-center">
<img src="/assets/empty-data.png" alt="empty" className="h-52 w-52 my-4" /> <Image width={1920} height={1080} src="/assets/empty-data.png" alt="empty" className="h-52 w-52 my-4" />
</p> </p>
)} )}
</div> </div>