Alihaghighattalab
31 lines
1.2 KiB
TypeScript
31 lines
1.2 KiB
TypeScript
import { useQuery } from "@tanstack/react-query"
|
||
import { AwardNotComplete } from "./award-not-complete"
|
||
import { getAwardsList } from "../../services/api/awards"
|
||
import { AwardsResponse } from "../../types"
|
||
import { AwardSkeleton } from "./award-skeleton"
|
||
import { handleError } from "../../utility/error-handle"
|
||
import { useEffect } from "react"
|
||
|
||
export const Awards = () => {
|
||
const { data, isLoading, error } = useQuery({
|
||
queryKey: ["awards"],
|
||
queryFn: getAwardsList
|
||
})
|
||
|
||
useEffect(() => {
|
||
handleError(error)
|
||
}, [error])
|
||
|
||
if (isLoading) return <AwardSkeleton />
|
||
return (
|
||
<div className="flex flex-col gap-10">
|
||
<div className="flex flex-row justify-between items-center">
|
||
<p className="font-medium text-xl text-primary-text-color">جوایز (5)</p>
|
||
<p className="font-normal text-base text-primary-text-color">امتیازهای من: 65</p>
|
||
</div>
|
||
<div className="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4 gap-6">
|
||
{data?.data?.map((award: AwardsResponse) => <AwardNotComplete key={award.id} award={award} />)}
|
||
</div>
|
||
</div>
|
||
)
|
||
} |