fix: change img to Image
This commit is contained in:
parent
2bb97c5a24
commit
50ca7cfc59
|
|
@ -18,6 +18,7 @@ import { Input } from "@/components/ui/input";
|
|||
import { Button } from "@/components/ui/button";
|
||||
import { sendMediaUploadToEmail } from "@/service/media-tracking/media-tracking";
|
||||
import ImageBlurry from "@/components/ui/image-blurry";
|
||||
import Image from "next/image";
|
||||
|
||||
const Galery = (props: any) => {
|
||||
const [profile, setProfile] = useState<any>();
|
||||
|
|
@ -376,7 +377,7 @@ const Galery = (props: any) => {
|
|||
</div>
|
||||
) : (
|
||||
<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>
|
||||
)
|
||||
) : selectedTab == "audio" ? (
|
||||
|
|
@ -456,7 +457,7 @@ const Galery = (props: any) => {
|
|||
</div>
|
||||
) : (
|
||||
<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>
|
||||
)
|
||||
) : selectedTab == "image" ? (
|
||||
|
|
@ -517,7 +518,7 @@ const Galery = (props: any) => {
|
|||
</div>
|
||||
) : (
|
||||
<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>
|
||||
)
|
||||
) : contentDocument.length > 0 ? (
|
||||
|
|
@ -588,7 +589,7 @@ const Galery = (props: any) => {
|
|||
</div>
|
||||
) : (
|
||||
<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>
|
||||
)}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -20,6 +20,7 @@ import { Input } from "@/components/ui/input";
|
|||
import { Button } from "@/components/ui/button";
|
||||
import { sendMediaUploadToEmail } from "@/service/media-tracking/media-tracking";
|
||||
import ImageBlurry from "@/components/ui/image-blurry";
|
||||
import Image from "next/image";
|
||||
|
||||
const Galery = (props: any) => {
|
||||
const [profile, setProfile] = useState<any>();
|
||||
|
|
@ -382,7 +383,7 @@ const Galery = (props: any) => {
|
|||
</div>
|
||||
) : (
|
||||
<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>
|
||||
)
|
||||
) : selectedTab == "audio" ? (
|
||||
|
|
@ -460,7 +461,7 @@ const Galery = (props: any) => {
|
|||
</div>
|
||||
) : (
|
||||
<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>
|
||||
)
|
||||
) : selectedTab == "image" ? (
|
||||
|
|
@ -521,7 +522,7 @@ const Galery = (props: any) => {
|
|||
</div>
|
||||
) : (
|
||||
<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>
|
||||
)
|
||||
) : contentDocument.length > 0 ? (
|
||||
|
|
@ -592,7 +593,7 @@ const Galery = (props: any) => {
|
|||
</div>
|
||||
) : (
|
||||
<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>
|
||||
)}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -17,6 +17,7 @@ import { Input } from "@/components/ui/input";
|
|||
import { Button } from "@/components/ui/button";
|
||||
import { sendMediaUploadToEmail } from "@/service/media-tracking/media-tracking";
|
||||
import ImageBlurry from "@/components/ui/image-blurry";
|
||||
import Image from "next/image";
|
||||
|
||||
const page = () => {
|
||||
const [, setProfile] = useState();
|
||||
|
|
@ -259,7 +260,7 @@ const page = () => {
|
|||
</div>
|
||||
) : (
|
||||
<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>
|
||||
)}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -20,6 +20,7 @@ import Swal from "sweetalert2";
|
|||
import parse from "html-react-parser";
|
||||
import { Skeleton } from "@/components/ui/skeleton";
|
||||
import { useTranslations } from "next-intl";
|
||||
import Image from "next/image";
|
||||
|
||||
const DetailInfo = () => {
|
||||
const MySwal = withReactContent(Swal);
|
||||
|
|
@ -444,7 +445,7 @@ const DetailInfo = () => {
|
|||
</div>
|
||||
) : (
|
||||
<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>
|
||||
)}
|
||||
|
|
@ -460,7 +461,7 @@ const DetailInfo = () => {
|
|||
<div className="py-4 flex flex-row gap-3">
|
||||
{detailDataImage?.files?.map((file: any, index: number) => (
|
||||
<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>
|
||||
))}
|
||||
</div>
|
||||
|
|
@ -614,7 +615,7 @@ const DetailInfo = () => {
|
|||
{listSuggestion?.map((data: any) => (
|
||||
<div className="flex flex-col">
|
||||
<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">
|
||||
<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}
|
||||
|
|
@ -663,7 +664,7 @@ const DetailInfo = () => {
|
|||
? data.children?.map((child1: any) => (
|
||||
<div className="flex flex-col">
|
||||
<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">
|
||||
<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) => (
|
||||
<div className="">
|
||||
<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">
|
||||
<p className="text-slate-500 text-sm lg:text-base border-b-2 border-slate-200 mb-2">
|
||||
{" "}
|
||||
|
|
|
|||
|
|
@ -17,6 +17,7 @@ import { close, loading } from "@/config/swal";
|
|||
import { useTranslations } from "next-intl";
|
||||
import ImageBlurry from "@/components/ui/image-blurry";
|
||||
import { Skeleton } from "@/components/ui/skeleton";
|
||||
import Image from "next/image";
|
||||
|
||||
const columns: ColumnDef<any>[] = [
|
||||
{
|
||||
|
|
@ -537,7 +538,7 @@ const FilterPage = () => {
|
|||
</div>
|
||||
) : (
|
||||
<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>
|
||||
)}
|
||||
</>
|
||||
|
|
|
|||
|
|
@ -11,6 +11,7 @@ import { getCookiesDecrypt } from "@/lib/utils";
|
|||
import { close, loading } from "@/config/swal";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { useTranslations } from "next-intl";
|
||||
import Image from "next/image";
|
||||
|
||||
const IndeksDetail = () => {
|
||||
const searchParams = useSearchParams();
|
||||
|
|
@ -161,7 +162,7 @@ const IndeksDetail = () => {
|
|||
</div>
|
||||
{/* Gambar Utama */}
|
||||
<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>
|
||||
{/* Footer Informasi */}
|
||||
<div className="text-gray-500 flex border-t mt-4">
|
||||
|
|
@ -195,7 +196,7 @@ const IndeksDetail = () => {
|
|||
{listComments?.map((data: any) => (
|
||||
<div className="flex flex-col">
|
||||
<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">
|
||||
<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>
|
||||
|
|
@ -233,7 +234,7 @@ const IndeksDetail = () => {
|
|||
? data.children?.map((child1: any) => (
|
||||
<div className="flex flex-col">
|
||||
<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">
|
||||
<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>
|
||||
|
|
@ -273,7 +274,7 @@ const IndeksDetail = () => {
|
|||
? child1.children?.map((child2: any) => (
|
||||
<div className="flex flex-col">
|
||||
<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">
|
||||
<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>
|
||||
|
|
@ -328,7 +329,7 @@ const IndeksDetail = () => {
|
|||
{indexData?.map((relate: any) => (
|
||||
<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">
|
||||
<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">
|
||||
<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>
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@ import { Skeleton } from "@/components/ui/skeleton";
|
|||
import { Link } from "@/i18n/routing";
|
||||
import { getIndeksData } from "@/service/landing/landing";
|
||||
import { formatDateToIndonesian } from "@/utils/globals";
|
||||
import Image from "next/image";
|
||||
import { usePathname } from "next/navigation";
|
||||
import React, { useEffect, useState } from "react";
|
||||
|
||||
|
|
@ -53,14 +54,14 @@ const Indeks: React.FC = () => {
|
|||
(indeks: any, index: number) =>
|
||||
index == count && (
|
||||
<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">
|
||||
<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}`}>
|
||||
<h2 className="text-2xl font-bold mt-2">{indeks?.title}</h2>
|
||||
</Link>
|
||||
<p className="text-xs flex flex-row items-center gap-1 mt-1 ml-2">
|
||||
{formatDateToIndonesian(new Date(indeks?.createdAt))} {indeks?.timezone ? indeks?.timezone : "WIB"}|{" "}
|
||||
<p className="text-xs flex flex-row items-center gap-1 mt-1">
|
||||
{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">
|
||||
<path
|
||||
fill="currentColor"
|
||||
|
|
@ -91,7 +92,7 @@ const Indeks: React.FC = () => {
|
|||
(indeksRight: any, index: number) =>
|
||||
(index == count + 1 || index == count + 2) && (
|
||||
<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">
|
||||
<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}`}>
|
||||
|
|
@ -148,7 +149,7 @@ const Indeks: React.FC = () => {
|
|||
(indeksBottom: any, index: number) =>
|
||||
index < 3 && (
|
||||
<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">
|
||||
<p className="text-sm">{indeksBottom?.date}</p>
|
||||
<Link href={`/indeks/detail/${indeksBottom?.slug}`} className="text-2xl font-semibold text-gray-800">
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
"use client";
|
||||
import { Link } from "@/components/navigation";
|
||||
import Image from "next/image";
|
||||
import React, { useState } from "react";
|
||||
|
||||
const ChangeProfile: React.FC = () => {
|
||||
|
|
@ -36,55 +37,29 @@ const ChangeProfile: React.FC = () => {
|
|||
|
||||
<div className="flex justify-center gap-4 mb-8">
|
||||
<Link href={"/profile"}>
|
||||
<button className="border border-red-700 text-red-700 px-4 py-2 rounded">
|
||||
User Profile
|
||||
</button>
|
||||
<button className="border border-red-700 text-red-700 px-4 py-2 rounded">User Profile</button>
|
||||
</Link>
|
||||
<Link href={"/profile/change-profile"}>
|
||||
<button className="bg-red-700 text-white px-4 py-2 rounded">
|
||||
Ubah Foto
|
||||
</button>
|
||||
<button className="bg-red-700 text-white px-4 py-2 rounded">Ubah Foto</button>
|
||||
</Link>
|
||||
<Link href={"/profile/change-password"}>
|
||||
<button className="border border-red-700 text-red-700 px-4 py-2 rounded">
|
||||
Ubah Password
|
||||
</button>
|
||||
<button className="border border-red-700 text-red-700 px-4 py-2 rounded">Ubah Password</button>
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<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="w-40 h-40 rounded-full border border-gray-300 flex items-center justify-center">
|
||||
{selectedImage ? (
|
||||
<img
|
||||
src={URL.createObjectURL(selectedImage)}
|
||||
alt="Preview"
|
||||
className="w-full h-full rounded-full object-cover"
|
||||
/>
|
||||
) : (
|
||||
<span className="text-gray-500">No Image</span>
|
||||
)}
|
||||
{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>}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-center gap-4">
|
||||
<input
|
||||
type="file"
|
||||
id="upload"
|
||||
accept="image/*"
|
||||
className="hidden"
|
||||
onChange={handleImageChange}
|
||||
/>
|
||||
<label
|
||||
htmlFor="upload"
|
||||
className="bg-blue-600 text-white px-4 py-2 rounded cursor-pointer"
|
||||
>
|
||||
<input type="file" 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
|
||||
</label>
|
||||
<button
|
||||
onClick={handleDelete}
|
||||
className="border border-red-700 text-red-700 px-4 py-2 rounded"
|
||||
>
|
||||
<button onClick={handleDelete} className="border border-red-700 text-red-700 px-4 py-2 rounded">
|
||||
Hapus Foto
|
||||
</button>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -20,6 +20,7 @@ import withReactContent from "sweetalert2-react-content";
|
|||
import Swal from "sweetalert2";
|
||||
import parse from "html-react-parser";
|
||||
import { useTranslations } from "next-intl";
|
||||
import Image from "next/image";
|
||||
|
||||
const DetailVideo = () => {
|
||||
const [selectedSize, setSelectedSize] = useState<string>("L");
|
||||
|
|
@ -586,7 +587,7 @@ const DetailVideo = () => {
|
|||
{listSuggestion?.map((data: any) => (
|
||||
<div className="flex flex-col">
|
||||
<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">
|
||||
<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}
|
||||
|
|
@ -635,7 +636,7 @@ const DetailVideo = () => {
|
|||
? data.children?.map((child1: any) => (
|
||||
<div className="flex flex-col">
|
||||
<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">
|
||||
<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) => (
|
||||
<div className="">
|
||||
<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">
|
||||
<p className="text-slate-500 text-sm lg:text-base border-b-2 border-slate-200 mb-2">
|
||||
{" "}
|
||||
|
|
|
|||
|
|
@ -17,6 +17,7 @@ import { close, loading } from "@/config/swal";
|
|||
import { useTranslations } from "next-intl";
|
||||
import ImageBlurry from "@/components/ui/image-blurry";
|
||||
import { Skeleton } from "@/components/ui/skeleton";
|
||||
import Image from "next/image";
|
||||
|
||||
const columns: ColumnDef<any>[] = [
|
||||
{
|
||||
|
|
@ -562,7 +563,7 @@ const FilterPage = () => {
|
|||
</div>
|
||||
) : (
|
||||
<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>
|
||||
)}
|
||||
</>
|
||||
|
|
|
|||
|
|
@ -6,6 +6,7 @@ import { Reveal } from "./Reveal";
|
|||
import { useTranslations } from "next-intl";
|
||||
import { usePathname } from "next/navigation";
|
||||
import { useParams } from "next/navigation";
|
||||
import Image from "next/image";
|
||||
|
||||
const ContentCategory = (props: { group?: string }) => {
|
||||
const [categories, setCategories] = useState<any>();
|
||||
|
|
@ -55,7 +56,7 @@ const ContentCategory = (props: { group?: string }) => {
|
|||
!seeAllValue ? (
|
||||
index < 4 ? (
|
||||
<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">
|
||||
<h3 className="text-sm font-semibold truncate">{category?.name}</h3>
|
||||
</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">
|
||||
<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">
|
||||
<h3 className="text-sm font-semibold truncate">{category?.name}</h3>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -7,6 +7,7 @@ import Link from "next/link";
|
|||
import { useParams, usePathname, useRouter } from "next/navigation";
|
||||
import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from "@/components/ui/carousel";
|
||||
import { Skeleton } from "../ui/skeleton";
|
||||
import Image from "next/image";
|
||||
|
||||
const Hero: React.FC = () => {
|
||||
const router = useRouter();
|
||||
|
|
@ -67,7 +68,7 @@ const Hero: React.FC = () => {
|
|||
{heroData?.map((list: any) => (
|
||||
<CarouselItem key={list?.id}>
|
||||
<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">
|
||||
<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}`}>
|
||||
|
|
@ -138,7 +139,7 @@ const Hero: React.FC = () => {
|
|||
{heroData?.map((item: any) => (
|
||||
<li key={item?.id} className="flex gap-4 flex-row lg:w-full ">
|
||||
<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 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>
|
||||
|
|
|
|||
|
|
@ -146,7 +146,7 @@ const Navbar = () => {
|
|||
<div className="flex items-center justify-between px-4 lg:px-20 py-4 gap-3">
|
||||
{/* Logo */}
|
||||
<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>
|
||||
|
||||
{/* Mobile Menu Toggle */}
|
||||
|
|
@ -294,7 +294,7 @@ const Navbar = () => {
|
|||
</Link> */}
|
||||
<div className="flex items-center space-x-1 ">
|
||||
<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>
|
||||
</div>
|
||||
|
||||
|
|
@ -417,7 +417,7 @@ const Navbar = () => {
|
|||
{notifications?.map((list: any) => (
|
||||
<a className="flex flex-row" href={list.redirectUrl} key={list.id}>
|
||||
<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 className="text-wrap text-left">{list?.message}</div>
|
||||
<div>
|
||||
|
|
@ -441,7 +441,7 @@ const Navbar = () => {
|
|||
{notificationsUpdate?.map((list: any) => (
|
||||
<a className="flex flex-row" href={list.redirectUrl} key={list.id}>
|
||||
<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 className="">
|
||||
<div className="text-wrap text-left">{list?.message}</div>
|
||||
|
|
@ -563,7 +563,7 @@ const Navbar = () => {
|
|||
{notifications?.map((list: any) => (
|
||||
<a className="" href={list.redirectUrl} key={list.id}>
|
||||
<div className="">
|
||||
<img src="/assets/avatar-profile.png" alt="..." className="" />
|
||||
<Image src="/assets/avatar-profile.png" alt="..." width={5} height={10} />
|
||||
</div>
|
||||
<div className="">
|
||||
<div className="text-wrap text-left">{list?.message}</div>
|
||||
|
|
@ -587,7 +587,7 @@ const Navbar = () => {
|
|||
{notificationsUpdate?.map((list: any) => (
|
||||
<a className="flex flex-row" href={list.redirectUrl} key={list.id}>
|
||||
<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 className="">
|
||||
<div className="text-wrap text-left">{list?.message}</div>
|
||||
|
|
@ -834,7 +834,7 @@ const Navbar = () => {
|
|||
</div> */}
|
||||
<div className="flex items-center space-x-1 mx-3 text-yellow-600 font-medium">
|
||||
<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>
|
||||
</div>
|
||||
|
||||
|
|
@ -989,7 +989,7 @@ const Navbar = () => {
|
|||
{notifications?.map((list: any) => (
|
||||
<a className="flex flex-row" href={list.redirectUrl} key={list.id}>
|
||||
<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 className="text-wrap text-left">{list?.message}</div>
|
||||
<div>
|
||||
|
|
@ -1013,7 +1013,7 @@ const Navbar = () => {
|
|||
{notificationsUpdate?.map((list: any) => (
|
||||
<a className="flex flex-row" href={list.redirectUrl} key={list.id}>
|
||||
<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 className="">
|
||||
<div className="text-wrap text-left">{list?.message}</div>
|
||||
|
|
@ -1135,7 +1135,7 @@ const Navbar = () => {
|
|||
{notifications?.map((list: any) => (
|
||||
<a className="" href={list.redirectUrl} key={list.id}>
|
||||
<div className="">
|
||||
<img src="/assets/avatar-profile.png" alt="..." className="" />
|
||||
<Image width={5} height={10} src="/assets/avatar-profile.png" alt="..." />
|
||||
</div>
|
||||
<div className="">
|
||||
<div className="text-wrap text-left">{list?.message}</div>
|
||||
|
|
@ -1159,7 +1159,7 @@ const Navbar = () => {
|
|||
{notificationsUpdate?.map((list: any) => (
|
||||
<a className="flex flex-row" href={list.redirectUrl} key={list.id}>
|
||||
<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 className="">
|
||||
<div className="text-wrap text-left">{list?.message}</div>
|
||||
|
|
|
|||
|
|
@ -11,6 +11,7 @@ import { Link } from "@/i18n/routing";
|
|||
import { Reveal } from "./Reveal";
|
||||
import { useTranslations } from "next-intl";
|
||||
import { Skeleton } from "../ui/skeleton";
|
||||
import Image from "next/image";
|
||||
|
||||
const NewContent = (props: { group: string; type: string }) => {
|
||||
const [newContent, setNewContent] = useState<any>();
|
||||
|
|
@ -117,9 +118,9 @@ const NewContent = (props: { group: string; type: string }) => {
|
|||
{newContent?.map((image: any) => (
|
||||
<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">
|
||||
<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">
|
||||
<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">
|
||||
{formatDateToIndonesian(new Date(image?.createdAt))} {image?.timezone ? image?.timezone : "WIB"} | <Icon icon="formkit:eye" width="15" height="15" /> {image.clickCount}{" "}
|
||||
</p>
|
||||
|
|
@ -133,7 +134,7 @@ const NewContent = (props: { group: string; type: string }) => {
|
|||
</Carousel>
|
||||
) : (
|
||||
<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>
|
||||
)
|
||||
) : selectedTab == "audio" ? (
|
||||
|
|
@ -171,7 +172,7 @@ const NewContent = (props: { group: string; type: string }) => {
|
|||
</Carousel>
|
||||
) : (
|
||||
<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>
|
||||
)
|
||||
) : selectedTab == "video" ? (
|
||||
|
|
@ -181,9 +182,9 @@ const NewContent = (props: { group: string; type: string }) => {
|
|||
{newContent?.map((video: any) => (
|
||||
<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">
|
||||
<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">
|
||||
<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">
|
||||
{formatDateToIndonesian(new Date(video?.createdAt))} {video?.timezone ? video?.timezone : "WIB"}| <Icon icon="formkit:eye" width="15" height="15" /> {video?.clickCount}{" "}
|
||||
</p>
|
||||
|
|
@ -197,7 +198,7 @@ const NewContent = (props: { group: string; type: string }) => {
|
|||
</Carousel>
|
||||
) : (
|
||||
<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>
|
||||
)
|
||||
) : newContent.length > 0 ? (
|
||||
|
|
@ -241,7 +242,7 @@ const NewContent = (props: { group: string; type: string }) => {
|
|||
</Carousel>
|
||||
) : (
|
||||
<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>
|
||||
)}
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue