56 lines
1.9 KiB
TypeScript
56 lines
1.9 KiB
TypeScript
"use client";
|
|
|
|
import React from "react";
|
|
import { Card, CardContent } from "@/components/ui/card";
|
|
import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from "@/components/ui/carousel";
|
|
import Image from "next/image";
|
|
|
|
const PpsSection = () => {
|
|
const image = [
|
|
{
|
|
id: 1,
|
|
src: "/assets/PPS.png",
|
|
},
|
|
{
|
|
id: 2,
|
|
src: "/assets/contoh6.png",
|
|
},
|
|
{
|
|
id: 3,
|
|
src: "/assets/contoh7.png",
|
|
},
|
|
];
|
|
|
|
return (
|
|
<div className="px-8 lg:px-20 py-4 lg:py-10">
|
|
<div>
|
|
<Carousel className="w-full mx-auto">
|
|
<CarouselContent>
|
|
{image?.map((news: any, index) => (
|
|
<CarouselItem key={news?.id} className="grid grid-cols-1">
|
|
<Card key={index} className="w-full overflow-hidden shadow-lg h-full">
|
|
<Image src={news.src} alt="pps" width={2560} height={1440} className="w-full h-full lg:h-[60vh] object-cover rounded-md" />
|
|
|
|
<CardContent className="p-4">
|
|
{/* <div className="flex items-center gap-2 text-white text-xs font-bold">
|
|
<span className={`${news.bgColor} px-2 py-1 rounded text-[12px] font-helvetica`}>{news.tag}</span>
|
|
<span className="text-[#A6711F] text-[12px] font-helvetica">{news.category}</span>
|
|
</div>
|
|
<p className="text-gray-400 text-[12px] font-helvetica mt-1">{news.date}</p>
|
|
<h3 className="text-[16px] font-helvetica font-bold mt-2">{news.title}</h3>
|
|
<p className="text-[14px] font-helvetica text-gray-500 mt-2">{news.description}</p> */}
|
|
</CardContent>
|
|
</Card>
|
|
</CarouselItem>
|
|
))}
|
|
</CarouselContent>
|
|
<CarouselPrevious className="hover:bg-black" />
|
|
<CarouselNext className="hover:bg-black -mr-6" />
|
|
</Carousel>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default PpsSection;
|