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

repush

This commit is contained in:
Sabda Yagra 2025-04-24 17:39:13 +07:00
parent 4c504ffbbe
commit fbe77eb64b
1 changed files with 10 additions and 69 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,7 +1,4 @@
import {
getCategoryData,
getPublicCategoryData,
} from "@/service/landing/landing";
import { getCategoryData, getPublicCategoryData } from "@/service/landing/landing";
import Link from "next/link";
import React, { useEffect, useState } from "react";
import { Button } from "../ui/button";
@ -24,15 +21,7 @@ const ContentCategory = (props: { group?: string }) => {
}, []);
const initFetch = async () => {
const response = await getPublicCategoryData(
props.group == "mabes"
? ""
: props.group == "polda" && poldaName && String(poldaName)?.length > 1
? poldaName
: props.group == "satker" &&
satkerName &&
String(satkerName)?.length > 1
? "satker-" + satkerName
: "",
props.group == "mabes" ? "" : props.group == "polda" && poldaName && String(poldaName)?.length > 1 ? poldaName : props.group == "satker" && satkerName && String(satkerName)?.length > 1 ? "satker-" + satkerName : "",
"",
locale == "en" ? true : false
);
@ -58,10 +47,7 @@ const ContentCategory = (props: { group?: string }) => {
<animate xlink:href="#r" attributeName="x" from="-${w}" to="${w}" dur="1s" repeatCount="indefinite" />
</svg>`;
const toBase64 = (str: string) =>
typeof window === "undefined"
? Buffer.from(str).toString("base64")
: window.btoa(str);
const toBase64 = (str: string) => (typeof window === "undefined" ? Buffer.from(str).toString("base64") : window.btoa(str));
return (
<div className="px-4 lg:px-24 py-10">
@ -85,29 +71,10 @@ const ContentCategory = (props: { group?: string }) => {
{categories?.map((category: any, index: number) =>
!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">
// <Image
// placeholder={`data:image/svg+xml;base64,${toBase64(shimmer(700, 475))}`}
// alt="category"
// width={2560}
// height={1440}
// src={category?.thumbnailLink}
// className="w-full lg:w-[315px] lg:h-[250px] h-40 object-cover group-hover:scale-110 transition-transform duration-300"
// />
// <div className="absolute bottom-5 left-0 right-16 bg-transparent backdrop-blur-md text-white p-4 border-l-2 border-[#bb3523]">
// <h3 className="text-sm font-semibold truncate">{category?.name}</h3>
// </div>
// </Link>
<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">
{/* Gambar */}
<Image
placeholder={`data:image/svg+xml;base64,${toBase64(
shimmer(700, 475)
)}`}
placeholder={`data:image/svg+xml;base64,${toBase64(shimmer(700, 475))}`}
alt="category"
width={2560}
height={1440}
@ -120,38 +87,17 @@ const ContentCategory = (props: { group?: string }) => {
{/* Judul */}
<div className="absolute bottom-5 left-0 right-16 bg-transparent backdrop-blur-md text-white p-4 border-l-2 border-[#bb3523] z-10 group-hover:scale-x-150 origin-left">
<h3 className="text-sm font-semibold truncate">
{category?.name}
</h3>
<h3 className="text-sm font-semibold truncate">{category?.name}</h3>
</div>
</Link>
) : (
""
)
) : (
// <Link key={category?.id} href={`all/filter?category=${category?.id}`} className="relative group rounded-md overflow-hidden shadow-md hover:shadow-lg">
// <Image
// placeholder={`data:image/svg+xml;base64,${toBase64(shimmer(700, 475))}`}
// alt="category"
// width={2560}
// height={1440}
// src={category?.thumbnailLink}
// className="w-fulllg:w-[315px] lg:h-[250px] h-40 object-cover group-hover:scale-110 transition-transform duration-300"
// />
// <div className="absolute bottom-5 left-0 right-16 bg-transparent backdrop-blur-md text-white p-4 border-l-2 border-[#bb3523]">
// <h3 className="text-sm font-semibold truncate">{category?.name}</h3>
// </div>
// </Link>
<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">
{/* Gambar */}
<Image
placeholder={`data:image/svg+xml;base64,${toBase64(
shimmer(700, 475)
)}`}
placeholder={`data:image/svg+xml;base64,${toBase64(shimmer(700, 475))}`}
alt="category"
width={2560}
height={1440}
@ -164,19 +110,14 @@ const ContentCategory = (props: { group?: string }) => {
{/* Judul */}
<div className="absolute bottom-5 left-0 right-16 bg-transparent backdrop-blur-md text-white p-4 border-l-2 border-[#bb3523] z-10">
<h3 className="text-sm font-semibold truncate">
{category?.name}
</h3>
<h3 className="text-sm font-semibold truncate">{category?.name}</h3>
</div>
</Link>
)
)}
</div>
<div className="flex items-center flex-row justify-center">
<Button
onClick={() => setSeeAllValue(!seeAllValue)}
className="bg-white hover:bg-[#bb3523] text-[#bb3523] hover:text-white border-2 border-[#bb3523]"
>
<Button onClick={() => setSeeAllValue(!seeAllValue)} className="bg-white hover:bg-[#bb3523] text-[#bb3523] hover:text-white border-2 border-[#bb3523]">
{seeAllValue ? t("seeLess") : t("seeMore")}
</Button>
</div>