74 lines
2.0 KiB
TypeScript
74 lines
2.0 KiB
TypeScript
"use client";
|
|
import { useTranslations } from "next-intl";
|
|
import DownloadCard from "./card";
|
|
import { useState } from "react";
|
|
import { useQuery } from "@tanstack/react-query";
|
|
import httpClient from "@/request/api";
|
|
import { endPoints } from "@/request/links";
|
|
import PaginationLite from "@/components/paginationUI";
|
|
import { DownloadCardSkeleton } from "./loading/guidLoading";
|
|
|
|
export function Guides() {
|
|
const t = useTranslations();
|
|
const [currentPage, setCurrentPage] = useState(1);
|
|
const guides = [
|
|
{
|
|
file: "/varnix.pdf",
|
|
name: t("about.notePPPage.varnix"),
|
|
file_type: "PDF",
|
|
file_size: "368.51 KB",
|
|
},
|
|
{
|
|
file: "/ppFlanes.pdf",
|
|
name: t("about.notePPPage.ppFlanes"),
|
|
file_type: "PDF",
|
|
file_size: "368.51 KB",
|
|
},
|
|
{
|
|
file: "/ppFiting.pdf",
|
|
name: t("about.notePPPage.ppFiting"),
|
|
file_type: "PDF",
|
|
file_size: "368.51 KB",
|
|
},
|
|
];
|
|
|
|
const { data, isLoading } = useQuery({
|
|
queryKey: ["guides"],
|
|
queryFn: () => httpClient(endPoints.guides),
|
|
select: (res) => ({
|
|
results: res.data?.data?.results,
|
|
current_page: res.data?.data?.current_page,
|
|
total_pages: res.data?.data?.total_pages,
|
|
}),
|
|
});
|
|
|
|
const guidedata = data?.results ?? guides;
|
|
|
|
return (
|
|
<div className="space-y-4">
|
|
<div className="grid lg:grid-cols-3 min-[580px]:grid-cols-2 grid-cols-1 gap-4 max-w-7xl mx-auto py-5">
|
|
{isLoading ? (
|
|
<DownloadCardSkeleton />
|
|
) : (
|
|
guidedata.map((guide: any, index: number) => (
|
|
<DownloadCard
|
|
key={index}
|
|
title={guide.name}
|
|
fileType={guide.file_type}
|
|
fileSize={guide.file_size}
|
|
fileUrl={guide.file}
|
|
/>
|
|
))
|
|
)}
|
|
</div>
|
|
{data?.total_pages > 1 && (
|
|
<PaginationLite
|
|
currentPage={currentPage}
|
|
totalPages={data?.total_pages}
|
|
onChange={setCurrentPage}
|
|
/>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|