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

change content-categor

This commit is contained in:
Sabda Yagra 2025-04-24 18:31:40 +07:00
parent fbe77eb64b
commit 5cefc299d8
1 changed files with 31 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -7,6 +7,7 @@ import { useTranslations } from "next-intl";
import { usePathname } from "next/navigation"; import { usePathname } from "next/navigation";
import { useParams } from "next/navigation"; import { useParams } from "next/navigation";
import Image from "next/image"; import Image from "next/image";
import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from "../ui/carousel";
const ContentCategory = (props: { group?: string }) => { const ContentCategory = (props: { group?: string }) => {
const [categories, setCategories] = useState<any>(); const [categories, setCategories] = useState<any>();
@ -67,60 +68,42 @@ const ContentCategory = (props: { group?: string }) => {
</h2> </h2>
<div className="h-1 w-52 bg-[#bb3523] mx-auto mb-6 rounded"></div> <div className="h-1 w-52 bg-[#bb3523] mx-auto mb-6 rounded"></div>
<div className="grid my-8 grid-cols-1 lg:grid-cols-4 gap-4"> <div className="">
{categories?.map((category: any, index: number) => <Carousel className="w-full max-w-full">
!seeAllValue ? ( <CarouselContent>
index < 4 ? ( {categories?.map((category: any) => (
<Link key={category?.id} href={`all/filter?category=${category?.id}`} className="relative group rounded-md overflow-hidden shadow-md hover:shadow-lg"> <CarouselItem key={category?.id} className="md:basis-1/2 lg:basis-1/3">
{/* Gambar */} <Link href={`all/filter?category=${category?.id}`} className="relative group rounded-md overflow-hidden shadow-md hover:shadow-lg block">
<Image {/* Gambar */}
placeholder={`data:image/svg+xml;base64,${toBase64(shimmer(700, 475))}`} <Image
alt="category" placeholder={`data:image/svg+xml;base64,${toBase64(shimmer(700, 475))}`}
width={2560} alt="category"
height={1440} width={2560}
src={category?.thumbnailLink} height={1440}
className="w-full lg:h-[250px] h-40 object-cover group-hover:scale-110 transition-transform duration-300" src={category?.thumbnailLink}
/> className="w-full lg:h-[250px] h-40 object-cover group-hover:scale-110 transition-transform duration-300"
/>
{/* Overlay gelap */} {/* Overlay gelap */}
<div className="absolute inset-0 bg-black bg-opacity-25 group-hover:bg-opacity-35 transition-all duration-300 rounded-md"></div> <div className="absolute inset-0 bg-black bg-opacity-25 group-hover:bg-opacity-35 transition-all duration-300 rounded-md"></div>
{/* Judul */} {/* 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"> <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> </div>
</Link> </Link>
) : ( </CarouselItem>
"" ))}
) </CarouselContent>
) : ( <CarouselPrevious className="-ml-0 lg:-ml-7" />
<Link key={category?.id} href={`all/filter?category=${category?.id}`} className="relative group rounded-md overflow-hidden shadow-md hover:shadow-lg"> <CarouselNext className="-mr-0 lg:-mr-7" />
{/* Gambar */} </Carousel>
<Image
placeholder={`data:image/svg+xml;base64,${toBase64(shimmer(700, 475))}`}
alt="category"
width={2560}
height={1440}
src={category?.thumbnailLink}
className="w-full lg:h-[250px] h-40 object-cover group-hover:scale-110 transition-transform duration-300"
/>
{/* Overlay Gelap */}
<div className="absolute inset-0 bg-black bg-opacity-25 group-hover:bg-opacity-35 transition-all duration-300"></div>
{/* 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>
</div>
</Link>
)
)}
</div> </div>
<div className="flex items-center flex-row justify-center"> {/* <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")} {seeAllValue ? t("seeLess") : t("seeMore")}
</Button> </Button>
</div> </div> */}
</Reveal> </Reveal>
</div> </div>
); );