56 lines
1.8 KiB
JavaScript
56 lines
1.8 KiB
JavaScript
|
"use client"
|
||
|
|
import React from "react";
|
||
|
|
import useSWR, { SWRConfig } from 'swr'
|
||
|
|
import { useEffect, useState } from 'react';
|
||
|
|
import { ProdukCard } from "@/app/library/card";
|
||
|
|
import { LoaderJo } from "@/app/component/loader";
|
||
|
|
const fetcher = (...args) => fetch(...args).then((res) => res.json())
|
||
|
|
|
||
|
|
const DaftarPremium = () =>{
|
||
|
|
const [count, setCount] = useState(0);
|
||
|
|
const { data: dPremium, mutate } = useSWR(`/pages/api/produk?order=uniqid&ascdesc=DESC&limit=24&start=${count}&approval=1®=1`, fetcher)
|
||
|
|
|
||
|
|
return <>
|
||
|
|
{!dPremium ?
|
||
|
|
<>
|
||
|
|
<LoaderJo/>
|
||
|
|
</>
|
||
|
|
:
|
||
|
|
<section className="block mt-10 px-4 md:px-10 my-[16px]">
|
||
|
|
<div className="w-full">
|
||
|
|
<div className="grid grid-cols-2 md:grid-cols-2 lg:grid-cols-4 xl:grid-cols-4 gap-5">
|
||
|
|
{dPremium ? dPremium.message.map((x, i) => {
|
||
|
|
x.key = i;
|
||
|
|
return (
|
||
|
|
<li className="list-none" key={i}>
|
||
|
|
<ProdukCard data={x} type={"premium"} />
|
||
|
|
</li>
|
||
|
|
)
|
||
|
|
}):<></>}
|
||
|
|
</div>
|
||
|
|
<div className="text-center">
|
||
|
|
<button className="p-2 bg-blue-700 text-white rounded mt-10 cursor-pointer"
|
||
|
|
onClick={()=>{
|
||
|
|
if(count != 0){
|
||
|
|
setCount(count-24);
|
||
|
|
mutate();
|
||
|
|
window.scrollTo(0, 0)
|
||
|
|
}
|
||
|
|
}}
|
||
|
|
>Listing Sebelumnya</button>
|
||
|
|
<button className="ml-2 p-2 bg-blue-700 text-white rounded mt-10 cursor-pointer"
|
||
|
|
onClick={()=>{
|
||
|
|
let cn = dPremium ? dPremium.message.length:0;
|
||
|
|
setCount(count+24);
|
||
|
|
mutate();
|
||
|
|
window.scrollTo(0, 0)
|
||
|
|
}}
|
||
|
|
>Listing Selanjutnya</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
}
|
||
|
|
</>
|
||
|
|
}
|
||
|
|
|
||
|
|
export default DaftarPremium;
|