victorAnumudu
76 lines
3.9 KiB
React
76 lines
3.9 KiB
React
// import React from 'react'
|
|
|
|
import { CiPhone } from "react-icons/ci"
|
|
import { IoIosPhonePortrait } from "react-icons/io"
|
|
import { MdOutlineEmail } from "react-icons/md"
|
|
|
|
export default function HomeCom() {
|
|
return (
|
|
<div className="w-full h-screen flex flex-col gap-2 overflow-y-auto text-black bg-slate-100 p-5 sm:p-[40px]">
|
|
<div className="py-4 text-3xl text-black font-bold">Users</div>
|
|
<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((item, index) => {
|
|
let color = item.place == 'Friends' ? 'text-emerald-500 bg-emerald-100/90' : item.place == 'Office' ? 'text-blue-500 bg-blue-100/90' : 'text-orange-500 bg-orange-100/90'
|
|
return (
|
|
<div key={index} className="w-full rounded p-3 sm:p-5 bg-white 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">{item.name}</h1>
|
|
<span className={` ${color} text-sm font-bold p-1 rounded`}>{item.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">
|
|
<IoIosPhonePortrait />
|
|
</span>
|
|
<span>{item.contact}</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">
|
|
<CiPhone />
|
|
</span>
|
|
<span>{item.contact}</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">
|
|
<MdOutlineEmail />
|
|
</span>
|
|
<span>{item.email}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
})}
|
|
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
const data = [
|
|
{name:'Jerry Eze', place: 'Home', contact: '021-025-0325', email: 'jerry@example.com'},
|
|
{name:'Mark John', place: 'Office', contact: '011-025-0311', email: 'mark@example.com'},
|
|
{name:'Larry Bon', place: 'Friends', contact: '033-025-0333', email: 'larry@example.com'},
|
|
{name:'Jeff Henry', place: 'Home', contact: '044-025-0344', email: 'jeff@example.com'},
|
|
{name:'Rose Ordor', place: 'Office', contact: '055-025-0355', email: 'rose@example.com'},
|
|
{name:'Mike Timothy', place: 'Friends', contact: '066-025-0366', email: 'mike@example.com'},
|
|
|
|
{name:'Jerry Eze', place: 'Home', contact: '021-025-0325', email: 'jerry@example.com'},
|
|
{name:'Mark John', place: 'Office', contact: '011-025-0311', email: 'mark@example.com'},
|
|
{name:'Larry Bon', place: 'Friends', contact: '033-025-0333', email: 'larry@example.com'},
|
|
{name:'Jeff Henry', place: 'Home', contact: '044-025-0344', email: 'jeff@example.com'},
|
|
{name:'Rose Ordor', place: 'Office', contact: '055-025-0355', email: 'rose@example.com'},
|
|
{name:'Mike Timothy', place: 'Friends', contact: '066-025-0366', email: 'mike@example.com'},
|
|
|
|
{name:'Jerry Eze', place: 'Home', contact: '021-025-0325', email: 'jerry@example.com'},
|
|
{name:'Mark John', place: 'Office', contact: '011-025-0311', email: 'mark@example.com'},
|
|
{name:'Larry Bon', place: 'Friends', contact: '033-025-0333', email: 'larry@example.com'},
|
|
{name:'Jeff Henry', place: 'Home', contact: '044-025-0344', email: 'jeff@example.com'},
|
|
{name:'Rose Ordor', place: 'Office', contact: '055-025-0355', email: 'rose@example.com'},
|
|
{name:'Mike Timothy', place: 'Friends', contact: '066-025-0366', email: 'mike@example.com'},
|
|
|
|
] |