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

Merge branch 'main' of https://gitlab.com/hanifsalafi/mediahub_redesign into prod

This commit is contained in:
hanif salafi 2025-07-28 15:48:36 +07:00
parent 2fae4027ee b20610369f
commit ed71982b6c
5 changed files with 68 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
app/[locale]/(protected)/admin/broadcast/campaign-list/component/column.tsx
View File

@ -73,21 +73,21 @@ const columns: ColumnDef<any>[] = [
</Button> </Button>
</DropdownMenuTrigger> </DropdownMenuTrigger>
<DropdownMenuContent className="p-0" align="end"> <DropdownMenuContent className="p-0" align="end">
<DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none"> <Link
<Link href={`/admin/broadcast/campaign-list/detail/${row.original.id}`}
href={`/admin/broadcast/campaign-list/detail/${row.original.id}`} >
> <DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none cursor-pointer">
Detail Detail
</Link> </DropdownMenuItem>
</DropdownMenuItem> </Link>
<DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none"> <Link
<Link href={`//admin/broadcast/campaign-list/edit/${row.original.id}`}
href={`//admin/broadcast/campaign-list/edit/${row.original.id}`} >
> <DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none cursor-pointer">
Edit Edit
</Link> </DropdownMenuItem>
</DropdownMenuItem> </Link>
<DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none"> <DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none cursor-pointer">
<a>Delete</a> <a>Delete</a>
</DropdownMenuItem> </DropdownMenuItem>
</DropdownMenuContent> </DropdownMenuContent>

26
app/[locale]/(protected)/admin/broadcast/email/component/column.tsx
View File

@ -85,23 +85,21 @@ const columns: ColumnDef<any>[] = [
</Button> </Button>
</DropdownMenuTrigger> </DropdownMenuTrigger>
<DropdownMenuContent className="p-0" align="end"> <DropdownMenuContent className="p-0" align="end">
<DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none"> <Link href={`/contributor/content/image/detail/${row.original.id}`}>
<Link <DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none cursor-pointer">
href={`/contributor/content/image/detail/${row.original.id}`}
>
Detail Detail
</Link> </DropdownMenuItem>
</DropdownMenuItem> </Link>
<DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none"> <Link href={`/admin/broadcast/email/${row.original.id}`}>
<Link href={`/admin/broadcast/email/${row.original.id}`}> <DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none cursor-pointer">
Email Blast Email Blast
</Link> </DropdownMenuItem>
</DropdownMenuItem> </Link>
<DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none"> <Link href={`/admin/broadcast/whatsapp/${row.original.id}`}>
<Link href={`/admin/broadcast/whatsapp/${row.original.id}`}> <DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none cursor-pointer">
Whatsapp Blast Whatsapp Blast
</Link> </DropdownMenuItem>
</DropdownMenuItem> </Link>
</DropdownMenuContent> </DropdownMenuContent>
</DropdownMenu> </DropdownMenu>
); );

26
app/[locale]/(protected)/admin/broadcast/whatsapp/component/column.tsx
View File

@ -80,23 +80,21 @@ const columns: ColumnDef<any>[] = [
</Button> </Button>
</DropdownMenuTrigger> </DropdownMenuTrigger>
<DropdownMenuContent className="p-0" align="end"> <DropdownMenuContent className="p-0" align="end">
<DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none"> <Link href={`/contributor/content/image/detail/${row.original.id}`}>
<Link <DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none cursor-pointer">
href={`/contributor/content/image/detail/${row.original.id}`}
>
Detail Detail
</Link> </DropdownMenuItem>
</DropdownMenuItem> </Link>
<DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none"> <Link href={`/admin/broadcast/email/${row.original.id}`}>
<Link href={`/admin/broadcast/email/${row.original.id}`}> <DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none cursor-pointer">
Email Blast Email Blast
</Link> </DropdownMenuItem>
</DropdownMenuItem> </Link>
<DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none"> <Link href={`/admin/broadcast/whatsapp/${row.original.id}`}>
<Link href={`/admin/broadcast/whatsapp/${row.original.id}`}> <DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none cursor-pointer">
Whatsapp Blast Whatsapp Blast
</Link> </DropdownMenuItem>
</DropdownMenuItem> </Link>
</DropdownMenuContent> </DropdownMenuContent>
</DropdownMenu> </DropdownMenu>
); );

14
components/landing-page/hero-new.tsx
View File

@ -49,6 +49,7 @@ import "swiper/css/pagination";
import { ChevronLeft, ChevronRight } from "lucide-react"; import { ChevronLeft, ChevronRight } from "lucide-react";
import { Link } from "@/i18n/routing"; import { Link } from "@/i18n/routing";
import { listBannerHero } from "@/service/settings/settings"; import { listBannerHero } from "@/service/settings/settings";
import ImageBlurry from "../ui/image-blurry";
type HeroModalProps = { type HeroModalProps = {
onClose: () => void; onClose: () => void;
@ -163,7 +164,7 @@ const HeroModal = ({
autoplay={{ delay: 3000 }} autoplay={{ delay: 3000 }}
className="mySwiper w-full" className="mySwiper w-full"
> >
{dataContent.map((list: any) => ( {dataContent?.map((list: any) => (
<SwiperSlide key={list?.id}> <SwiperSlide key={list?.id}>
<div className="relative h-[310px] lg:h-[420px]"> <div className="relative h-[310px] lg:h-[420px]">
<button <button
@ -353,7 +354,7 @@ const HeroNew = (props: { group?: string }) => {
const timer = setTimeout(() => { const timer = setTimeout(() => {
console.log("Show modal popup"); console.log("Show modal popup");
setShowModal(true); setShowModal(true);
}, 5000); }, 5000);
return () => clearTimeout(timer); return () => clearTimeout(timer);
}, []); }, []);
@ -542,12 +543,15 @@ const HeroNew = (props: { group?: string }) => {
<SwiperSlide key={list?.id}> <SwiperSlide key={list?.id}>
<div className="relative h-[310px] lg:h-[700px]"> <div className="relative h-[310px] lg:h-[700px]">
{/* Gambar */} {/* Gambar */}
<Image <ImageBlurry
priority priority
src={list?.smallThumbnailLink} src={list?.smallThumbnailLink}
alt="gambar" alt="gambar"
fill style={{
className="object-cover w-full h-full" objectFit: "contain",
width: "100%",
height: "100%",
}}
/> />
{/* Overlay */} {/* Overlay */}

33
components/ui/image-blurry.tsx
View File

@ -1,4 +1,4 @@
import React, { useEffect, useState } from 'react'; import React, { useEffect, useState } from "react";
interface ImageBlurryProps { interface ImageBlurryProps {
src: string; src: string;
@ -6,10 +6,11 @@ interface ImageBlurryProps {
classname?: string; classname?: string;
key?: string | number; key?: string | number;
style?: React.CSSProperties; style?: React.CSSProperties;
priority?: boolean;
} }
const ImageBlurry: React.FC<ImageBlurryProps> = (props) => { const ImageBlurry: React.FC<ImageBlurryProps> = (props) => {
const { src, alt, classname, key, style } = props; const { src, alt, classname, key, style, priority = false } = props;
const [imgSrc, setImgSrc] = useState<string>(src); const [imgSrc, setImgSrc] = useState<string>(src);
const [isError, setIsError] = useState<boolean>(false); const [isError, setIsError] = useState<boolean>(false);
@ -19,12 +20,12 @@ const ImageBlurry: React.FC<ImageBlurryProps> = (props) => {
}, [src]); }, [src]);
const handleImage = () => { const handleImage = () => {
const pics = document.querySelectorAll<HTMLImageElement>('img'); const pics = document.querySelectorAll<HTMLImageElement>("img");
pics.forEach((pic) => { pics.forEach((pic) => {
if (pic.complete) { if (pic.complete) {
checkImage(pic); checkImage(pic);
} else { } else {
pic.addEventListener('load', function () { pic.addEventListener("load", function () {
checkImage(this); checkImage(this);
}); });
} }
@ -33,16 +34,16 @@ const ImageBlurry: React.FC<ImageBlurryProps> = (props) => {
const checkImage = (img: HTMLImageElement) => { const checkImage = (img: HTMLImageElement) => {
if (img.naturalHeight > img.naturalWidth) { if (img.naturalHeight > img.naturalWidth) {
img.classList.add('portrait'); img.classList.add("portrait");
} else if (Math.abs(img.naturalHeight - img.naturalWidth) < 10) { } else if (Math.abs(img.naturalHeight - img.naturalWidth) < 10) {
img.classList.add('square'); img.classList.add("square");
} else { } else {
img.classList.add('landscape'); img.classList.add("landscape");
} }
}; };
const onLoad = () => { const onLoad = () => {
console.log('Image loaded:', src); console.log("Image loaded:", src);
handleImage(); handleImage();
}; };
@ -51,9 +52,19 @@ const ImageBlurry: React.FC<ImageBlurryProps> = (props) => {
// <div className="absolute -top-6 -bottom-6 left-0 -right-6 bg-[#e9e9e9] blur-[8px] scale-[1.8] bg-center bg-no-repeat bg-contain blur-bg" style={{ backgroundImage: `url(${imgSrc})` }}></div> // <div className="absolute -top-6 -bottom-6 left-0 -right-6 bg-[#e9e9e9] blur-[8px] scale-[1.8] bg-center bg-no-repeat bg-contain blur-bg" style={{ backgroundImage: `url(${imgSrc})` }}></div>
// <div className="absolute inset-0 bg-transparent bg-center bg-no-repeat bg-contain image-bg" style={{ backgroundImage: `url(${imgSrc})` }}></div> // <div className="absolute inset-0 bg-transparent bg-center bg-no-repeat bg-contain image-bg" style={{ backgroundImage: `url(${imgSrc})` }}></div>
// </div> // </div>
<div className="blurry-wrapper relative overflow-hidden bg-[#e9e9e9] rounded-lg" key={key} style={style}> <div
<div className="absolute -top-6 -bottom-6 -left-0 -right-6 bg-[#e9e9e9] blur-[8px] scale-[1.8] bg-center bg-no-repeat bg-contain blur-bg" style={{ backgroundImage: `url(${imgSrc})` }}></div> className="blurry-wrapper relative overflow-hidden bg-[#e9e9e9] rounded-lg"
<div className="absolute inset-0 bg-transparent bg-center bg-no-repeat bg-contain image-bg" style={{ backgroundImage: `url(${imgSrc})` }}></div> key={key}
style={style}
>
<div
className="absolute -top-6 -bottom-6 -left-0 -right-6 bg-[#e9e9e9] blur-[8px] scale-[1.8] bg-center bg-no-repeat bg-contain blur-bg"
style={{ backgroundImage: `url(${imgSrc})` }}
></div>
<div
className="absolute inset-0 bg-transparent bg-center bg-no-repeat bg-contain image-bg"
style={{ backgroundImage: `url(${imgSrc})` }}
></div>
</div> </div>
); );
}; };