Created
November 25, 2022 11:51
-
-
Save fatima-ola/00541b18715247fc7d7b23b84d4b5914 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import Image from "next/image"; | |
import Link from "next/link"; | |
export default function SearchList({ allContacts }) { | |
function getFirstLetter(character) { | |
return character.charAt(0).toUpperCase(); | |
} | |
let contactInfo = []; | |
allContacts.forEach((data) => { | |
return contactInfo.push({ | |
id: data.record.id, | |
email: data.record.email, | |
imageUrl: data.record.imageUrl, | |
firstName: data.record.firstName, | |
lastName: data.record.lastName, | |
location: data.record.location, | |
phoneNumber: data.record.phoneNumber, | |
}); | |
}); | |
return ( | |
<div> | |
{contactInfo.length > 0 ? ( | |
<div> | |
{contactInfo?.map(({ firstName, phoneNumber, id, imageUrl }) => ( | |
<div key={id}> | |
<Link href={{ pathname: `contact/${id}` }}> | |
<ul role='list' className='p-6 divide-y divide-slate-200'> | |
<li className='flex bg-gray-100 p-[10px] rounded-full'> | |
{imageUrl === "" ? ( | |
<p className='self-center bg-pink-200 font-bold py-2 px-4 mr-2 rounded-full'> | |
{getFirstLetter(firstName)} | |
</p> | |
) : ( | |
<Image | |
className='h-10 w-10 rounded-full' | |
width={40} | |
height={40} | |
src={imageUrl} | |
alt='' | |
/> | |
)} | |
<div className='ml-3 overflow-hidden'> | |
<p className='text-sm font-medium text-slate-900'> | |
{firstName} | |
</p> | |
<p className='text-sm text-slate-500 truncate'> | |
{phoneNumber} | |
</p> | |
</div> | |
</li> | |
</ul> | |
</Link> | |
</div> | |
))} | |
</div> | |
) : ( | |
<div className='text-center'> | |
<p className='text-center'>Contact Not found</p> | |
</div> | |
)} | |
</div> | |
); | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment