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

fixing

This commit is contained in:
Sabda Yagra 2025-08-05 22:54:26 +07:00
parent 4508f5db37
commit c1aec7f316
2 changed files with 144 additions and 90 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -250,34 +250,38 @@ const Navbar = () => {
</PopoverTrigger> </PopoverTrigger>
<PopoverContent className="flex flex-col gap-2 w-fit px-6 py-4 rounded-md shadow-md bg-white dark:bg-black"> <PopoverContent className="flex flex-col gap-2 w-fit px-6 py-4 rounded-md shadow-md bg-white dark:bg-black">
<button <Link
onClick={() => router.push(prefixPath + "/image/filter")} href={prefixPath + "/image/filter"}
// onClick={() => router.push(prefixPath + "/image/filter")}
className="flex items-center text-slate-600 dark:text-white hover:text-[#bb3523]" className="flex items-center text-slate-600 dark:text-white hover:text-[#bb3523]"
> >
<FiImage className="mr-2" /> <FiImage className="mr-2" />
{t("image", { defaultValue: "Image" })} {t("image", { defaultValue: "Image" })}
</button> </Link>
<button <Link
onClick={() => router.push(prefixPath + "/video/filter")} href={prefixPath + "/video/filter"}
// onClick={() => router.push(prefixPath + "/video/filter")}
className="flex items-center text-slate-600 dark:text-white hover:text-[#bb3523]" className="flex items-center text-slate-600 dark:text-white hover:text-[#bb3523]"
> >
<FiYoutube className="mr-2" /> <FiYoutube className="mr-2" />
{t("video", { defaultValue: "Video" })} {t("video", { defaultValue: "Video" })}
</button> </Link>
<button <Link
onClick={() => router.push(prefixPath + "/document/filter")} href={prefixPath + "/document/filter"}
// onClick={() => router.push(prefixPath + "/document/filter")}
className="flex items-center text-slate-600 dark:text-white hover:text-[#bb3523]" className="flex items-center text-slate-600 dark:text-white hover:text-[#bb3523]"
> >
<FiFile className="mr-2" /> <FiFile className="mr-2" />
{t("text", { defaultValue: "Text" })} {t("text", { defaultValue: "Text" })}
</button> </Link>
<button <Link
onClick={() => router.push(prefixPath + "/audio/filter")} href={prefixPath + "/audio/filter"}
// onClick={() => router.push(prefixPath + "/audio/filter")}
className="flex items-center text-slate-600 dark:text-white hover:text-[#bb3523]" className="flex items-center text-slate-600 dark:text-white hover:text-[#bb3523]"
> >
<FiMusic className="mr-2" /> <FiMusic className="mr-2" />
{t("audio", { defaultValue: "Audio" })} {t("audio", { defaultValue: "Audio" })}
</button> </Link>
</PopoverContent> </PopoverContent>
</Popover> </Popover>

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

@ -128,7 +128,10 @@ const NewContent = (props: { group: string; type: string }) => {
<h2 className="flex items-center text-lg md:text-xl font-bold text-[#bb3523] border-b-2 border-[#bb3523] uppercase"> <h2 className="flex items-center text-lg md:text-xl font-bold text-[#bb3523] border-b-2 border-[#bb3523] uppercase">
{pathname?.split("/")[1] == "in" ? ( {pathname?.split("/")[1] == "in" ? (
<> <>
<span className="text-[#bb3523] ">{t("content", { defaultValue: "Content" })}</span>&nbsp; <span className="text-[#bb3523] ">
{t("content", { defaultValue: "Content" })}
</span>
&nbsp;
{props.type == "popular" {props.type == "popular"
? "Terpopuler" ? "Terpopuler"
: props.type == "latest" : props.type == "latest"
@ -153,10 +156,22 @@ const NewContent = (props: { group: string; type: string }) => {
<Tabs value={selectedTab} onValueChange={setSelectedTab}> <Tabs value={selectedTab} onValueChange={setSelectedTab}>
<TabsList className="flex gap-2 bg-transparent p-0"> <TabsList className="flex gap-2 bg-transparent p-0">
{[ {[
{ label: t("image", { defaultValue: "Image" }), value: "image" }, {
{ label: t("video", { defaultValue: "Video" }), value: "video" }, label: t("image", { defaultValue: "Image" }),
{ label: t("text", { defaultValue: "Text" }), value: "document" }, value: "image",
{ label: t("audio", { defaultValue: "Audio" }), value: "audio" }, },
{
label: t("video", { defaultValue: "Video" }),
value: "video",
},
{
label: t("text", { defaultValue: "Text" }),
value: "document",
},
{
label: t("audio", { defaultValue: "Audio" }),
value: "audio",
},
].map((tab) => ( ].map((tab) => (
<TabsTrigger <TabsTrigger
key={tab.value} key={tab.value}
@ -194,12 +209,12 @@ const NewContent = (props: { group: string; type: string }) => {
className="md:basis-1/2 lg:basis-1/3" className="md:basis-1/2 lg:basis-1/3"
> >
<div <div
onClick={() => // onClick={() =>
router.push( // router.push(
prefixPath + `/image/detail/${image?.slug}` // prefixPath + `/image/detail/${image?.slug}`
) // )
} // }
className="cursor-pointer relative group overflow-hidden bg-white dark:bg-black dark:border dark:border-gray-500 rounded-xl shadow-md hover:shadow-lg transition-shadow duration-300" className="relative group overflow-hidden bg-white dark:bg-black dark:border dark:border-gray-500 rounded-xl shadow-md hover:shadow-lg transition-shadow duration-300"
> >
{/* Image with motion effect */} {/* Image with motion effect */}
<motion.div <motion.div
@ -207,17 +222,24 @@ const NewContent = (props: { group: string; type: string }) => {
whileHover={{ scale: 0.95 }} whileHover={{ scale: 0.95 }}
transition={{ duration: 0.3 }} transition={{ duration: 0.3 }}
> >
<Image <Link
priority={true} href={
placeholder={`data:image/svg+xml;base64,${toBase64( prefixPath + `/image/detail/${image?.slug}`
shimmer(700, 475) }
)}`} >
width={2560} {" "}
height={1440} <Image
alt="image" priority={true}
src={image?.smallThumbnailLink} placeholder={`data:image/svg+xml;base64,${toBase64(
className="w-full h-full object-cover" shimmer(700, 475)
/> )}`}
width={2560}
height={1440}
alt="image"
src={image?.smallThumbnailLink}
className="w-full h-full object-cover"
/>
</Link>
</motion.div> </motion.div>
{/* Badge category */} {/* Badge category */}
@ -248,15 +270,15 @@ const NewContent = (props: { group: string; type: string }) => {
{image?.categoryName?.toUpperCase() ?? {image?.categoryName?.toUpperCase() ??
"Giat Pimpinan"} "Giat Pimpinan"}
</p> </p>
<p <Link
className=" href={
text-sm lg:text-base font-semibold text-black dark:text-white prefixPath + `/image/detail/${image?.slug}`
line-clamp-4 /* LIMIT to 2 lines if plugin available */ }
/* or use min-h-[3rem] as fallback */
"
> >
{image?.title} <p className="text-sm lg:text-base font-semibold text-black dark:text-white line-clamp-4">
</p> {image?.title}
</p>
</Link>
</div> </div>
{/* Optional metadata area (uncomment if needed) */} {/* Optional metadata area (uncomment if needed) */}
{/* {/*
@ -271,7 +293,7 @@ const NewContent = (props: { group: string; type: string }) => {
))} ))}
</CarouselContent> </CarouselContent>
<div className="flex justify-center mt-4"> <div className="flex justify-center mt-2">
{Array.from({ length: count }).map((_, index) => ( {Array.from({ length: count }).map((_, index) => (
<button <button
key={index} key={index}
@ -308,13 +330,14 @@ const NewContent = (props: { group: string; type: string }) => {
key={audio?.id} key={audio?.id}
className="md:basis-1/2 lg:basis-1/3" className="md:basis-1/2 lg:basis-1/3"
> >
<div <Link
onClick={() => href={prefixPath + `/audio/detail/${audio?.slug}`}
router.push( // onClick={() =>
prefixPath + `/audio/detail/${audio?.slug}` // router.push(
) // prefixPath + `/audio/detail/${audio?.slug}`
} // )
className="cursor-pointer bg-white dark:bg-black dark:border dark:border-gray-500 rounded-xl shadow-md hover:shadow-lg transition-shadow duration-300 overflow-hidden" // }
className="bg-white dark:bg-black dark:border dark:border-gray-500 rounded-xl shadow-md hover:shadow-lg transition-shadow duration-300 overflow-hidden"
> >
{/* Icon Background */} {/* Icon Background */}
<div className="flex items-center justify-center bg-[#bb3523] w-full h-[170px] text-white"> <div className="flex items-center justify-center bg-[#bb3523] w-full h-[170px] text-white">
@ -347,7 +370,7 @@ const NewContent = (props: { group: string; type: string }) => {
<Icon icon="formkit:eye" width="15" height="15" /> {audio?.clickCount} <Icon icon="formkit:eye" width="15" height="15" /> {audio?.clickCount}
</p> */} </p> */}
</div> </div>
</div> </Link>
</CarouselItem> </CarouselItem>
))} ))}
</CarouselContent> </CarouselContent>
@ -390,12 +413,12 @@ const NewContent = (props: { group: string; type: string }) => {
className="md:basis-1/2 lg:basis-1/3" className="md:basis-1/2 lg:basis-1/3"
> >
<div <div
onClick={() => // onClick={() =>
router.push( // router.push(
prefixPath + `/video/detail/${video?.slug}` // prefixPath + `/video/detail/${video?.slug}`
) // )
} // }
className="cursor-pointer relative group overflow-hidden bg-white dark:bg-black dark:border dark:border-gray-500 rounded-xl shadow-md hover:shadow-lg transition-shadow duration-300" className="relative group overflow-hidden bg-white dark:bg-black dark:border dark:border-gray-500 rounded-xl shadow-md hover:shadow-lg transition-shadow duration-300"
> >
{/* Image with motion effect */} {/* Image with motion effect */}
<motion.div <motion.div
@ -403,17 +426,23 @@ const NewContent = (props: { group: string; type: string }) => {
whileHover={{ scale: 0.95 }} whileHover={{ scale: 0.95 }}
transition={{ duration: 0.3 }} transition={{ duration: 0.3 }}
> >
<Image <Link
priority={true} href={
placeholder={`data:image/svg+xml;base64,${toBase64( prefixPath + `/video/detail/${video?.slug}`
shimmer(700, 475) }
)}`} >
alt="video" <Image
width={2560} priority={true}
height={1440} placeholder={`data:image/svg+xml;base64,${toBase64(
src={video?.smallThumbnailLink} shimmer(700, 475)
className="w-full h-full object-cover" )}`}
/> alt="video"
width={2560}
height={1440}
src={video?.smallThumbnailLink}
className="w-full h-full object-cover"
/>
</Link>
</motion.div> </motion.div>
{/* Badge category */} {/* Badge category */}
@ -444,10 +473,15 @@ const NewContent = (props: { group: string; type: string }) => {
{video?.categoryName?.toUpperCase() ?? {video?.categoryName?.toUpperCase() ??
"Giat Pimpinan"} "Giat Pimpinan"}
</p> </p>
<p <Link
className="text-sm lg:text-base font-semibold text-black dark:text-white line-clamp-5"> href={
{video?.title} prefixPath + `/video/detail/${video?.slug}`
</p> }
>
<p className="text-sm lg:text-base font-semibold text-black dark:text-white line-clamp-5">
{video?.title}
</p>
</Link>
</div> </div>
{/* Optional metadata area (uncomment if needed) */} {/* Optional metadata area (uncomment if needed) */}
{/* {/*
@ -500,15 +534,18 @@ const NewContent = (props: { group: string; type: string }) => {
className="md:basis-1/2 lg:basis-1/3" className="md:basis-1/2 lg:basis-1/3"
> >
<div <div
onClick={() => // onClick={() =>
router.push( // router.push(
prefixPath + `/document/detail/${text?.slug}` // prefixPath + `/document/detail/${text?.slug}`
) // )
} // }
className="cursor-pointer rounded-lg shadow-md overflow-hidden bg-white dark:bg-black dark:border dark:border-gray-500" className="rounded-lg shadow-md overflow-hidden bg-white dark:bg-black dark:border dark:border-gray-500"
> >
{/* Ikon di tengah dengan latar kuning */} {/* Ikon di tengah dengan latar kuning */}
<div className="bg-[#e0c350] flex items-center justify-center h-[170px] text-white"> <Link
href={prefixPath + `/document/detail/${text?.slug}`}
className="bg-[#e0c350] flex items-center justify-center h-[170px] text-white"
>
<svg <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
width="150" width="150"
@ -520,7 +557,7 @@ const NewContent = (props: { group: string; type: string }) => {
d="M5 1a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V5.414a1.5 1.5 0 0 0-.44-1.06L9.647 1.439A1.5 1.5 0 0 0 8.586 1zM4 3a1 1 0 0 1 1-1h3v2.5A1.5 1.5 0 0 0 9.5 6H12v7a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1zm7.793 2H9.5a.5.5 0 0 1-.5-.5V2.207zM7 7.5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 0 1h-3a.5.5 0 0 1-.5-.5M7.5 9a.5.5 0 0 0 0 1h3a.5.5 0 0 0 0-1zM7 11.5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 0 1h-3a.5.5 0 0 1-.5-.5M5.5 8a.5.5 0 1 0 0-1a.5.5 0 0 0 0 1M6 9.5a.5.5 0 1 1-1 0a.5.5 0 0 1 1 0M5.5 12a.5.5 0 1 0 0-1a.5.5 0 0 0 0 1" d="M5 1a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V5.414a1.5 1.5 0 0 0-.44-1.06L9.647 1.439A1.5 1.5 0 0 0 8.586 1zM4 3a1 1 0 0 1 1-1h3v2.5A1.5 1.5 0 0 0 9.5 6H12v7a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1zm7.793 2H9.5a.5.5 0 0 1-.5-.5V2.207zM7 7.5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 0 1h-3a.5.5 0 0 1-.5-.5M7.5 9a.5.5 0 0 0 0 1h3a.5.5 0 0 0 0-1zM7 11.5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 0 1h-3a.5.5 0 0 1-.5-.5M5.5 8a.5.5 0 1 0 0-1a.5.5 0 0 0 0 1M6 9.5a.5.5 0 1 1-1 0a.5.5 0 0 1 1 0M5.5 12a.5.5 0 1 0 0-1a.5.5 0 0 0 0 1"
/> />
</svg> </svg>
</div> </Link>
{/* Konten bawah */} {/* Konten bawah */}
<div className="p-4 flex flex-col gap-2"> <div className="p-4 flex flex-col gap-2">
@ -530,10 +567,15 @@ const NewContent = (props: { group: string; type: string }) => {
</div> </div>
{/* Judul */} {/* Judul */}
<div className="font-semibold text-gray-900 dark:text-white text-xl leading-snug line-clamp-4"> <Link
{text?.title} href={
</div> prefixPath + `/document/detail/${text?.slug}`
}
>
<p className="font-semibold text-gray-900 dark:text-white text-xl leading-snug line-clamp-4">
{text?.title}
</p>
</Link>
{/* Meta info */} {/* Meta info */}
{/* <div className="text-gray-500 flex items-center text-xs gap-2"> {/* <div className="text-gray-500 flex items-center text-xs gap-2">
<span> <span>
@ -592,9 +634,17 @@ const NewContent = (props: { group: string; type: string }) => {
)} )}
</div> </div>
<div className="flex items-center flex-row justify-center mt-3"> <div className="flex items-center flex-row justify-center mt-3">
<div onClick={() => router.push(prefixPath + `/${selectedTab}/filter?sortBy=${props.type}`)} className="cursor-pointer border text-[#bb3523] rounded-lg text-sm lg:text-md px-4 py-1 border-[#bb3523] hover:text-white hover:bg-[#bb3523]"> <Link
href={prefixPath + `/${selectedTab}/filter?sortBy=${props.type}`}
// onClick={() =>
// router.push(
// prefixPath + `/${selectedTab}/filter?sortBy=${props.type}`
// )
// }
className="cursor-pointer border text-[#bb3523] rounded-lg text-sm lg:text-md px-4 py-1 border-[#bb3523] hover:text-white hover:bg-[#bb3523]"
>
{t("seeAll", { defaultValue: "See All" })} {t("seeAll", { defaultValue: "See All" })}
</div> </Link>
</div> </div>
</Reveal> </Reveal>
</div> </div>