victorAnumudu
83 lines
4.3 KiB
React
83 lines
4.3 KiB
React
import React, { useEffect, useState } from 'react'
|
|
import SearchCom from '../Helpers/SearchCom'
|
|
import LoadingSpinner from '../Spinners/LoadingSpinner';
|
|
import { Link } from 'react-router-dom';
|
|
import { useSelector } from 'react-redux';
|
|
|
|
export default function FamilyWalletRedeemOptions() {
|
|
|
|
const { familyWalletRedeemOptList } = useSelector((state) => state.familyWalletRedeemOptList); // FAMILY WALLET REDDEM OPTIONS LIST
|
|
|
|
const [filteredRedeemData, setFilteredRedeemData] = useState({value: '', data:{}}) // State to hold filtered redeem banner option
|
|
|
|
const handleFilterRedeemData = ({target}) => {
|
|
// thiskey01
|
|
let filterWord = target.value
|
|
let filteredData = {}
|
|
if(!filterWord){
|
|
filteredData = {...familyWalletRedeemOptList?.data}
|
|
}else{
|
|
let matchedData = Object.keys(familyWalletRedeemOptList?.data)?.filter(item => (item.toLowerCase().startsWith(filterWord.toLowerCase())))
|
|
filteredData = matchedData.map(item => familyWalletRedeemOptList.data[item])
|
|
}
|
|
setFilteredRedeemData({value:target.value, data: {...filteredData}})
|
|
}
|
|
|
|
useEffect(()=>{
|
|
setFilteredRedeemData(prev => ({...prev, data:{...familyWalletRedeemOptList?.data}}))
|
|
}, [familyWalletRedeemOptList.image])
|
|
|
|
return (
|
|
<div className="w-full">
|
|
<div className="w-full sm:flex items-center gap-4">
|
|
<h1 className="text-2xl font-bold text-black dark:text-white">Redeem Options</h1>
|
|
<div className="sm:w-1/2 w-full sm:pr-20 pr-0 mb-5 sm:mb-0">
|
|
<SearchCom
|
|
placeholder='Search...'
|
|
value={filteredRedeemData.value}
|
|
handleSearch={handleFilterRedeemData}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
{/* redeem options */}
|
|
{familyWalletRedeemOptList.loading ?
|
|
<div className='mt-5 w-full h-[20rem] rounded-2xl bg-white dark:bg-dark-white text-black dark:text-white flex justify-center items-center'>
|
|
<LoadingSpinner size='10' color='sky-blue' height='h-[30rem]' />
|
|
</div>
|
|
: Object.keys(familyWalletRedeemOptList?.data)?.length > 0 ?
|
|
Object.keys(filteredRedeemData?.data)?.length ?
|
|
<div className="mt-5 grid sm:grid-cols-2 lg:grid-cols-3 xxl:grid-cols-4 gap-4">
|
|
{ Object.keys(filteredRedeemData?.data)?.map((item)=>{
|
|
// text, image, description, action
|
|
let newData = filteredRedeemData?.data[item].banner
|
|
let bgImage = `url(${newData?.image})`
|
|
return (
|
|
<Link to={''} key={item}>
|
|
<div className={`group relative h-60 text-black dark:text-white rounded-2xl shadow-md hover:shadow-none transition-all duration-300 overflow-hidden`}
|
|
style={{
|
|
// background: `#ffffff ${bgImage} no-repeat center center / cover`
|
|
}}
|
|
>
|
|
<img src={newData?.image} alt='Redeem Image' className='w-full h-full bg-cover rounded-2xl group-hover:scale-110 transition-all duration-300' />
|
|
<div className='absolute bottom-0 mb-1 left-1/2 -translate-x-1/2 p-2 bg-white/80 rounded-2xl w-[90%] flex flex-col justify-center items-center gap-2'>
|
|
<h1 className='text-lg font-bold text-[#083e21]'>{newData.text}</h1>
|
|
</div>
|
|
</div>
|
|
</Link>
|
|
)
|
|
})}
|
|
</div>
|
|
:
|
|
<div className='mt-5 w-full h-[20rem] rounded-2xl bg-white dark:bg-dark-white text-black dark:text-white flex justify-center items-center'>
|
|
<p>Search Item not Found!</p>
|
|
</div>
|
|
:
|
|
<div className='mt-5 w-full h-[20rem] rounded-2xl bg-white dark:bg-dark-white text-black dark:text-white flex justify-center items-center'>
|
|
<p>No Redeem Options Found!</p>
|
|
</div>
|
|
}
|
|
</div>
|
|
)
|
|
}
|