fixing
This commit is contained in:
parent
4508f5db37
commit
c1aec7f316
|
|
@ -250,34 +250,38 @@ const Navbar = () => {
|
|||
</PopoverTrigger>
|
||||
|
||||
<PopoverContent className="flex flex-col gap-2 w-fit px-6 py-4 rounded-md shadow-md bg-white dark:bg-black">
|
||||
<button
|
||||
onClick={() => router.push(prefixPath + "/image/filter")}
|
||||
<Link
|
||||
href={prefixPath + "/image/filter"}
|
||||
// onClick={() => router.push(prefixPath + "/image/filter")}
|
||||
className="flex items-center text-slate-600 dark:text-white hover:text-[#bb3523]"
|
||||
>
|
||||
<FiImage className="mr-2" />
|
||||
{t("image", { defaultValue: "Image" })}
|
||||
</button>
|
||||
<button
|
||||
onClick={() => router.push(prefixPath + "/video/filter")}
|
||||
</Link>
|
||||
<Link
|
||||
href={prefixPath + "/video/filter"}
|
||||
// onClick={() => router.push(prefixPath + "/video/filter")}
|
||||
className="flex items-center text-slate-600 dark:text-white hover:text-[#bb3523]"
|
||||
>
|
||||
<FiYoutube className="mr-2" />
|
||||
{t("video", { defaultValue: "Video" })}
|
||||
</button>
|
||||
<button
|
||||
onClick={() => router.push(prefixPath + "/document/filter")}
|
||||
</Link>
|
||||
<Link
|
||||
href={prefixPath + "/document/filter"}
|
||||
// onClick={() => router.push(prefixPath + "/document/filter")}
|
||||
className="flex items-center text-slate-600 dark:text-white hover:text-[#bb3523]"
|
||||
>
|
||||
<FiFile className="mr-2" />
|
||||
{t("text", { defaultValue: "Text" })}
|
||||
</button>
|
||||
<button
|
||||
onClick={() => router.push(prefixPath + "/audio/filter")}
|
||||
</Link>
|
||||
<Link
|
||||
href={prefixPath + "/audio/filter"}
|
||||
// onClick={() => router.push(prefixPath + "/audio/filter")}
|
||||
className="flex items-center text-slate-600 dark:text-white hover:text-[#bb3523]"
|
||||
>
|
||||
<FiMusic className="mr-2" />
|
||||
{t("audio", { defaultValue: "Audio" })}
|
||||
</button>
|
||||
</Link>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
{pathname?.split("/")[1] == "in" ? (
|
||||
<>
|
||||
<span className="text-[#bb3523] ">{t("content", { defaultValue: "Content" })}</span>
|
||||
<span className="text-[#bb3523] ">
|
||||
{t("content", { defaultValue: "Content" })}
|
||||
</span>
|
||||
|
||||
{props.type == "popular"
|
||||
? "Terpopuler"
|
||||
: props.type == "latest"
|
||||
|
|
@ -153,10 +156,22 @@ const NewContent = (props: { group: string; type: string }) => {
|
|||
<Tabs value={selectedTab} onValueChange={setSelectedTab}>
|
||||
<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("text", { defaultValue: "Text" }), value: "document" },
|
||||
{ label: t("audio", { defaultValue: "Audio" }), value: "audio" },
|
||||
{
|
||||
label: t("image", { defaultValue: "Image" }),
|
||||
value: "image",
|
||||
},
|
||||
{
|
||||
label: t("video", { defaultValue: "Video" }),
|
||||
value: "video",
|
||||
},
|
||||
{
|
||||
label: t("text", { defaultValue: "Text" }),
|
||||
value: "document",
|
||||
},
|
||||
{
|
||||
label: t("audio", { defaultValue: "Audio" }),
|
||||
value: "audio",
|
||||
},
|
||||
].map((tab) => (
|
||||
<TabsTrigger
|
||||
key={tab.value}
|
||||
|
|
@ -194,12 +209,12 @@ const NewContent = (props: { group: string; type: string }) => {
|
|||
className="md:basis-1/2 lg:basis-1/3"
|
||||
>
|
||||
<div
|
||||
onClick={() =>
|
||||
router.push(
|
||||
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"
|
||||
// onClick={() =>
|
||||
// router.push(
|
||||
// prefixPath + `/image/detail/${image?.slug}`
|
||||
// )
|
||||
// }
|
||||
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 */}
|
||||
<motion.div
|
||||
|
|
@ -207,17 +222,24 @@ const NewContent = (props: { group: string; type: string }) => {
|
|||
whileHover={{ scale: 0.95 }}
|
||||
transition={{ duration: 0.3 }}
|
||||
>
|
||||
<Image
|
||||
priority={true}
|
||||
placeholder={`data:image/svg+xml;base64,${toBase64(
|
||||
shimmer(700, 475)
|
||||
)}`}
|
||||
width={2560}
|
||||
height={1440}
|
||||
alt="image"
|
||||
src={image?.smallThumbnailLink}
|
||||
className="w-full h-full object-cover"
|
||||
/>
|
||||
<Link
|
||||
href={
|
||||
prefixPath + `/image/detail/${image?.slug}`
|
||||
}
|
||||
>
|
||||
{" "}
|
||||
<Image
|
||||
priority={true}
|
||||
placeholder={`data:image/svg+xml;base64,${toBase64(
|
||||
shimmer(700, 475)
|
||||
)}`}
|
||||
width={2560}
|
||||
height={1440}
|
||||
alt="image"
|
||||
src={image?.smallThumbnailLink}
|
||||
className="w-full h-full object-cover"
|
||||
/>
|
||||
</Link>
|
||||
</motion.div>
|
||||
|
||||
{/* Badge category */}
|
||||
|
|
@ -248,15 +270,15 @@ const NewContent = (props: { group: string; type: string }) => {
|
|||
{image?.categoryName?.toUpperCase() ??
|
||||
"Giat Pimpinan"}
|
||||
</p>
|
||||
<p
|
||||
className="
|
||||
text-sm lg:text-base font-semibold text-black dark:text-white
|
||||
line-clamp-4 /* LIMIT to 2 lines if plugin available */
|
||||
/* or use min-h-[3rem] as fallback */
|
||||
"
|
||||
<Link
|
||||
href={
|
||||
prefixPath + `/image/detail/${image?.slug}`
|
||||
}
|
||||
>
|
||||
{image?.title}
|
||||
</p>
|
||||
<p className="text-sm lg:text-base font-semibold text-black dark:text-white line-clamp-4">
|
||||
{image?.title}
|
||||
</p>
|
||||
</Link>
|
||||
</div>
|
||||
{/* Optional metadata area (uncomment if needed) */}
|
||||
{/*
|
||||
|
|
@ -271,7 +293,7 @@ const NewContent = (props: { group: string; type: string }) => {
|
|||
))}
|
||||
</CarouselContent>
|
||||
|
||||
<div className="flex justify-center mt-4">
|
||||
<div className="flex justify-center mt-2">
|
||||
{Array.from({ length: count }).map((_, index) => (
|
||||
<button
|
||||
key={index}
|
||||
|
|
@ -308,13 +330,14 @@ const NewContent = (props: { group: string; type: string }) => {
|
|||
key={audio?.id}
|
||||
className="md:basis-1/2 lg:basis-1/3"
|
||||
>
|
||||
<div
|
||||
onClick={() =>
|
||||
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"
|
||||
<Link
|
||||
href={prefixPath + `/audio/detail/${audio?.slug}`}
|
||||
// onClick={() =>
|
||||
// router.push(
|
||||
// prefixPath + `/audio/detail/${audio?.slug}`
|
||||
// )
|
||||
// }
|
||||
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 */}
|
||||
<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}
|
||||
</p> */}
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
</CarouselItem>
|
||||
))}
|
||||
</CarouselContent>
|
||||
|
|
@ -390,12 +413,12 @@ const NewContent = (props: { group: string; type: string }) => {
|
|||
className="md:basis-1/2 lg:basis-1/3"
|
||||
>
|
||||
<div
|
||||
onClick={() =>
|
||||
router.push(
|
||||
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"
|
||||
// onClick={() =>
|
||||
// router.push(
|
||||
// prefixPath + `/video/detail/${video?.slug}`
|
||||
// )
|
||||
// }
|
||||
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 */}
|
||||
<motion.div
|
||||
|
|
@ -403,17 +426,23 @@ const NewContent = (props: { group: string; type: string }) => {
|
|||
whileHover={{ scale: 0.95 }}
|
||||
transition={{ duration: 0.3 }}
|
||||
>
|
||||
<Image
|
||||
priority={true}
|
||||
placeholder={`data:image/svg+xml;base64,${toBase64(
|
||||
shimmer(700, 475)
|
||||
)}`}
|
||||
alt="video"
|
||||
width={2560}
|
||||
height={1440}
|
||||
src={video?.smallThumbnailLink}
|
||||
className="w-full h-full object-cover"
|
||||
/>
|
||||
<Link
|
||||
href={
|
||||
prefixPath + `/video/detail/${video?.slug}`
|
||||
}
|
||||
>
|
||||
<Image
|
||||
priority={true}
|
||||
placeholder={`data:image/svg+xml;base64,${toBase64(
|
||||
shimmer(700, 475)
|
||||
)}`}
|
||||
alt="video"
|
||||
width={2560}
|
||||
height={1440}
|
||||
src={video?.smallThumbnailLink}
|
||||
className="w-full h-full object-cover"
|
||||
/>
|
||||
</Link>
|
||||
</motion.div>
|
||||
|
||||
{/* Badge category */}
|
||||
|
|
@ -444,10 +473,15 @@ const NewContent = (props: { group: string; type: string }) => {
|
|||
{video?.categoryName?.toUpperCase() ??
|
||||
"Giat Pimpinan"}
|
||||
</p>
|
||||
<p
|
||||
className="text-sm lg:text-base font-semibold text-black dark:text-white line-clamp-5">
|
||||
{video?.title}
|
||||
</p>
|
||||
<Link
|
||||
href={
|
||||
prefixPath + `/video/detail/${video?.slug}`
|
||||
}
|
||||
>
|
||||
<p className="text-sm lg:text-base font-semibold text-black dark:text-white line-clamp-5">
|
||||
{video?.title}
|
||||
</p>
|
||||
</Link>
|
||||
</div>
|
||||
{/* 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"
|
||||
>
|
||||
<div
|
||||
onClick={() =>
|
||||
router.push(
|
||||
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"
|
||||
// onClick={() =>
|
||||
// router.push(
|
||||
// prefixPath + `/document/detail/${text?.slug}`
|
||||
// )
|
||||
// }
|
||||
className="rounded-lg shadow-md overflow-hidden bg-white dark:bg-black dark:border dark:border-gray-500"
|
||||
>
|
||||
{/* 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
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
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"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</Link>
|
||||
|
||||
{/* Konten bawah */}
|
||||
<div className="p-4 flex flex-col gap-2">
|
||||
|
|
@ -530,10 +567,15 @@ const NewContent = (props: { group: string; type: string }) => {
|
|||
</div>
|
||||
|
||||
{/* Judul */}
|
||||
<div className="font-semibold text-gray-900 dark:text-white text-xl leading-snug line-clamp-4">
|
||||
{text?.title}
|
||||
</div>
|
||||
|
||||
<Link
|
||||
href={
|
||||
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 */}
|
||||
{/* <div className="text-gray-500 flex items-center text-xs gap-2">
|
||||
<span>
|
||||
|
|
@ -592,9 +634,17 @@ const NewContent = (props: { group: string; type: string }) => {
|
|||
)}
|
||||
</div>
|
||||
<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" })}
|
||||
</div>
|
||||
</Link>
|
||||
</div>
|
||||
</Reveal>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue