DigiFi/digifi-SalaryLoan
1
0
Fork 0
Code Issues Pull Requests Releases Activity

adjusted offer screen

Browse Source
This commit is contained in:
victorAnumudu
2025-02-10 16:03:54 +01:00
parent 5533797d24
commit b248cce3a5
2 changed files with 53 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/HomeCom.jsx
+17 -9
View File
@@ -5,6 +5,8 @@ import { useNavigate } from 'react-router-dom'
import { CiPhone } from "react-icons/ci"
import { CiBank } from "react-icons/ci";
import { MdOutlineEmail } from "react-icons/md"
import { FaMapPin } from "react-icons/fa";
import { demoUsersList } from "../services/siteServices"
import queryKeys from "../services/queryKeys"
import myLinks from "../myLinks";
@@ -28,7 +30,7 @@ export default function HomeCom() {
return (
<div className={`h-screen bg-sky-300 flex flex-col items-center justify-center bg-[url('./assets/first-background.jpg')] bg-cover bg-center bg-no-repeat`}>
<div className="w-full h-screen flex flex-col gap-2 overflow-y-auto text-black p-5 sm:p-[40px]">
<div className="py-4 text-3xl text-black font-bold">Users</div>
<div className="py-3 text-3xl text-black font-bold">Users</div>
{isFetching ?
<>
<div className="w-full py-4">
@@ -44,31 +46,37 @@ export default function HomeCom() {
{({ data }) => (
<div className="grid gap-5 sm:gap-[40px] grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
{data.map((user, index) => {
let color = user.place == 'Friends' ? 'text-emerald-500 bg-emerald-100/90' : user.place == 'Office' ? 'text-blue-500 bg-blue-100/90' : 'text-orange-500 bg-orange-100/90'
return (
<div onClick={()=>getLoanPage(user)} key={user?.uid || index} className="w-full rounded p-3 sm:p-5 bg-white shadow flex flex-col gap-5 hover:scale-105 hover:cursor-pointer">
let hasSalaryAcct = user.salary_account === 0 ? false : true
return (
<div onClick={()=>getLoanPage(user)} key={user?.uid || index} className={`${hasSalaryAcct ? 'bg-white' : 'bg-red-50'} w-full rounded p-3 sm:p-5 shadow flex flex-col gap-5 hover:scale-105 hover:cursor-pointer`}>
<div className="mb-5 card-title w-[70%] mx-auto">
<h1 className="mb-[1px] text-2xl font-bold">{user.name}</h1>
{/* <span className={` ${color} text-sm font-bold p-1 rounded`}>{user.place}</span> */}
</div>
<div className="card-body flex flex-col gap-2">
<div className="contact text-slate-700 flex gap-3 items-center">
<span className="w-[40px] h-[40px] rounded-full flex flex-col justify-center items-center bg-slate-100/90 text-slate-700">
<div className="contact text-slate-700 flex gap-2 items-center">
<span className="min-w-[30px] min-h-[30px] max-w-[30px] max-h-[30px] rounded-full flex flex-col justify-center items-center bg-slate-100/90 text-slate-700">
<CiBank />
</span>
<span>{user.bvn}</span>
</div>
<div className="contact text-slate-700 flex gap-3 items-center">
<span className="w-[40px] h-[40px] rounded-full flex flex-col justify-center items-center bg-slate-100/90 text-slate-700">
<span className="min-w-[30px] min-h-[30px] max-w-[30px] max-h-[30px] rounded-full flex flex-col justify-center items-center bg-slate-100/90 text-slate-700">
<CiPhone />
</span>
<span>{user.mobile}</span>
</div>
<div className="contact text-slate-700 flex gap-3 items-center">
<span className="w-[40px] h-[40px] rounded-full flex flex-col justify-center items-center bg-slate-100/90 text-slate-700">
<span className="min-w-[30px] min-h-[30px] max-w-[30px] max-h-[30px] rounded-full flex flex-col justify-center items-center bg-slate-100/90 text-slate-700">
<MdOutlineEmail />
</span>
<span>{user.email}</span>
<span className="break-words">{user.email}</span>
</div>
<div className="contact text-slate-700 flex gap-3 items-center">
<span className="min-w-[30px] min-h-[30px] max-w-[30px] max-h-[30px] rounded-full flex flex-col justify-center items-center bg-slate-100/90 text-slate-700">
<FaMapPin />
</span>
<span>{user.pin}</span>
</div>
</div>
</div>