55 lines
1.3 KiB
TypeScript
55 lines
1.3 KiB
TypeScript
|
"use client";
|
||
|
|
|
||
|
|
import { useQuery } from "@tanstack/react-query";
|
||
|
|
import { MapsetCard } from "../../mapset-card";
|
||
|
|
import mapsetApi from "@/shared/services/mapset";
|
||
|
|
|
||
|
|
export default function HighlightMapset() {
|
||
|
|
const { data: mapsets, isLoading } = useQuery({
|
||
|
|
queryKey: ["mapsets-highlight"],
|
||
|
|
queryFn: () =>
|
||
|
|
mapsetApi
|
||
|
|
.getMapsets(
|
||
|
|
{
|
||
|
|
limit: 3,
|
||
|
|
filter: JSON.stringify([
|
||
|
|
"is_active=true",
|
||
|
|
"is_popular=true",
|
||
|
|
"status_validation=approved",
|
||
|
|
]),
|
||
|
|
},
|
||
|
|
{ skipAuth: true },
|
||
|
|
)
|
||
|
|
.then((res) => {
|
||
|
|
return res.items;
|
||
|
|
}),
|
||
|
|
staleTime: 5000,
|
||
|
|
});
|
||
|
|
|
||
|
|
if (isLoading) {
|
||
|
|
return (
|
||
|
|
<div className="mt-20 grid gap-4 md:grid-cols-2 lg:grid-cols-3 xl:gap-9">
|
||
|
|
{[...Array(3)].map((_, index) => (
|
||
|
|
<div key={index} className="animate-pulse">
|
||
|
|
<div className="h-64 rounded-lg bg-gray-200"></div>
|
||
|
|
</div>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
if (!mapsets || mapsets.length === 0) {
|
||
|
|
return <></>;
|
||
|
|
}
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="mt-20 grid gap-4 md:grid-cols-2 lg:grid-cols-3 xl:gap-9">
|
||
|
|
{mapsets.slice(0, 3).map((mapset) => (
|
||
|
|
<div key={mapset.id}>
|
||
|
|
<MapsetCard mapset={mapset} />
|
||
|
|
</div>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|