38 lines
1.5 KiB
TypeScript
38 lines
1.5 KiB
TypeScript
import { getCategoryData } from "@/service/landing/landing";
|
|
import Link from "next/link";
|
|
import React, { useEffect, useState } from "react";
|
|
|
|
const ContentCategory = () => {
|
|
const [categories, setCategories] = useState<any>();
|
|
useEffect(() => {
|
|
initFetch();
|
|
}, []);
|
|
const initFetch = async () => {
|
|
const response = await getCategoryData();
|
|
console.log("category",response);
|
|
setCategories(response?.data?.data?.content);
|
|
};
|
|
|
|
return (
|
|
<div className="mx-auto px-4 lg:px-12 py-10 max-w-screen-xl ">
|
|
<h2 className="text-center text-xl lg:text-2xl font-bold text-[#bb3523] mb-4">
|
|
Kategori <span className="text-black dark:text-white">Konten</span>
|
|
</h2>
|
|
<div className="h-1 w-48 bg-[#bb3523] mx-auto mb-6 rounded"></div>
|
|
|
|
<div className="grid my-3 grid-cols-2 lg:grid-cols-4 gap-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">
|
|
<img src={category?.thumbnailLink} className="w-full h-48 sm:h-40 object-cover group-hover:scale-110 transition-transform duration-300" />
|
|
<div className="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black to-transparent text-white p-2">
|
|
<h3 className="text-sm font-semibold truncate">{category?.name}</h3>
|
|
</div>
|
|
</Link>
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default ContentCategory;
|