victorAnumudu
75 lines
2.9 KiB
React
75 lines
2.9 KiB
React
import React, { useEffect, useState } from 'react'
|
|
|
|
import usersService from '../../../services/UsersService'
|
|
|
|
import LoadingSpinner from '../../Spinners/LoadingSpinner'
|
|
import { PriceFormatter } from '../../Helpers/PriceFormatter'
|
|
import { localImgLoad } from '../../../lib'
|
|
import background from '../../../assets/images/bg-sky-blue.jpg'
|
|
|
|
function FamilyWallet({familyData}) {
|
|
const apiUrl = new usersService()
|
|
|
|
let [familyWallet, setFamilyWallet] = useState({loading:true, data: []})
|
|
|
|
useEffect(()=>{
|
|
apiUrl.getFamilyWallet({family_uid:familyData?.uid}).then(res => {
|
|
setFamilyWallet({loading:false, data: res?.data?.result_list || []})
|
|
}).catch(error => {
|
|
setFamilyWallet({loading:false, data: []})
|
|
})
|
|
},[])
|
|
|
|
return (
|
|
<div className='p-3 w-full h-full bg-white dark:bg-dark-white flex flex-col justify-start items-start'>
|
|
{familyWallet.loading ?
|
|
<div className='w-full h-20 flex justify-center items-center'>
|
|
<LoadingSpinner size='8' color='sky-blue' />
|
|
</div>
|
|
:
|
|
familyWallet?.data?.length > 0 ?
|
|
<div className='w-full p-4 flex flex-col gap-2'>
|
|
{familyWallet?.data?.map((wallet, index)=>(
|
|
<div key={index} className='w-full p-4 bg-[aliceblue] rounded-lg'
|
|
// style={{
|
|
// background: `url(${background}) 0% 0% / cover no-repeat`,
|
|
// }}
|
|
>
|
|
<div className="w-full flex justify-start items-center gap-3">
|
|
<div className="min-w-[50px] min-h-[50px] max-w-min md:max-w-[80px] max-h-min md:max-h-[80px] rounded-full bg-[#e3e3e3] flex justify-center items-center">
|
|
<img
|
|
src={localImgLoad(`images/currency/${(wallet.code).toLowerCase()}.svg`)}
|
|
className="w-full h-full"
|
|
alt="currency-icon"
|
|
/>
|
|
</div>
|
|
<div className="balance mt-2 flex justify-center">
|
|
<div className="flex gap-2">
|
|
<p className="text-base md:text-lg text-thin-light-gray tracking-wide mb-2 sm:mb-6">
|
|
Balance:
|
|
</p>
|
|
<p
|
|
className="text-base md:text-lg font-bold text-purple tracking-wide leading-10"
|
|
// className="text-[44px] lg:text-[62px] font-bold text-white tracking-wide leading-10 xxs:scale-100 lg:scale-100 xl:scale-125"
|
|
>
|
|
{PriceFormatter(
|
|
Number(wallet.amount) * 0.01,
|
|
wallet.code,
|
|
wallet.country,
|
|
""
|
|
)}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
:
|
|
<p className='text-lg text-gray-500 dark:text-gray-400'>No Wallet Found!</p>
|
|
}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default FamilyWallet |