danak/asan-installer-front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

complete sync api

Browse Source
This commit is contained in:
Alihaghighattalab
2024-08-17 12:17:15 +03:30
parent 49cd5faf9d
commit ddf6bcd287
9 changed files with 155 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/home/status-box.tsx
+38 -2
View File
@@ -1,13 +1,49 @@
import { useQuery } from "@tanstack/react-query"
import { StatusBoxItemInterface } from "../../types"
import { statusBoxItems } from "../../utility/status"
import { StatusBoxItem } from "../common/status-box-items"
import { getOverviewDetails } from "../../services/api/overview"
import { useEffect, useState } from "react"
import { Coin1, DollarCircle, Radar, Star } from "iconsax-react"
import { HomeStatusSkeleton } from "./status-skeleton"
export const StatusBox = () => {
const { data, isLoading } = useQuery({
queryKey: ['overview'],
queryFn: getOverviewDetails
})
const [statusData, setStatusData] = useState<StatusBoxItemInterface[] | []>([])
useEffect(() => {
setStatusData([{
name: "dollar",
title: "دارایی دلاری",
icon: <DollarCircle color="#292D32" variant="Bold" className="size-[40px]" />,
value: data?.data?.user?.dollarBalance
},
{
name: "coin",
title: "دارایی از تمدید اشتراک",
icon: <Coin1 color="#292D32" variant="Bold" className="size-[40px]" />,
value: data?.data?.user?.walletBalance
},
{
name: "star",
title: "امتیاز شرکت در قرعه کشی",
icon: <Star color="#292D32" variant="Bold" className="size-[40px]" />,
value: data?.data?.user?.score
},
{
name: "radar",
title: "تعداد کل دستگاه ثبت شده موفق",
icon: <Radar color="#292D32" variant="Bold" className="size-[40px]" />,
value: data?.data?.installedDevice
}])
}, [data])
if (isLoading) return <HomeStatusSkeleton />
return (
<div className="grid grid-cols-1 sm:grid-cols-2 2xl:grid-cols-4 gap-6">
{statusBoxItems?.map((item: StatusBoxItemInterface) => <StatusBoxItem key={item?.name} item={item} />)}
{statusData?.map((item: StatusBoxItemInterface) => <StatusBoxItem key={item?.name} item={item} />)}
</div>
)
}
src/components/home/status-skeleton.tsx
+32
View File
@@ -0,0 +1,32 @@
export const HomeStatusSkeleton = () => {
return <div className="grid grid-cols-1 sm:grid-cols-2 2xl:grid-cols-4 gap-6 animate-pulse">
<div className="w-full bg-auth-form p-[18px] h-full rounded-[40px] flex flex-col gap-[42px] min-h-[220px]">
<div className="size-16 bg-secondary-color flex justify-center rounded-full items-center"></div>
<div className="flex flex-col gap-8">
<div className="flex flex-col gap-3 w-32 h-2 bg-secondary-color rounded-full"></div>
<div className="flex flex-col gap-3 w-20 h-2 bg-secondary-color rounded-full"></div>
</div>
</div>
<div className="w-full bg-auth-form p-[18px] h-full rounded-[40px] flex flex-col gap-[42px] min-h-[220px]">
<div className="size-16 bg-secondary-color flex justify-center rounded-full items-center"></div>
<div className="flex flex-col gap-8">
<div className="flex flex-col gap-3 w-32 h-2 bg-secondary-color rounded-full"></div>
<div className="flex flex-col gap-3 w-20 h-2 bg-secondary-color rounded-full"></div>
</div>
</div>
<div className="w-full bg-auth-form p-[18px] h-full rounded-[40px] flex flex-col gap-[42px] min-h-[220px]">
<div className="size-16 bg-secondary-color flex justify-center rounded-full items-center"></div>
<div className="flex flex-col gap-8">
<div className="flex flex-col gap-3 w-32 h-2 bg-secondary-color rounded-full"></div>
<div className="flex flex-col gap-3 w-20 h-2 bg-secondary-color rounded-full"></div>
</div>
</div>
<div className="w-full bg-auth-form p-[18px] h-full rounded-[40px] flex flex-col gap-[42px] min-h-[220px]">
<div className="size-16 bg-secondary-color flex justify-center rounded-full items-center"></div>
<div className="flex flex-col gap-8">
<div className="flex flex-col gap-3 w-32 h-2 bg-secondary-color rounded-full"></div>
<div className="flex flex-col gap-3 w-20 h-2 bg-secondary-color rounded-full"></div>
</div>
</div>
</div>
}