2 KiB
2 KiB
It's me!
<ContactListItem
i18n={util.i18n}
isMe
name="Someone 🔥 Somewhere"
phoneNumber="(202) 555-0011"
verified
profileName="🔥Flames🔥"
avatarPath={util.gifObjectUrl}
onClick={() => console.log('onClick')}
/>
With name and profile
Note the proper spacing between these two.
<div>
<ContactListItem
i18n={util.i18n}
name="Someone 🔥 Somewhere"
phoneNumber="(202) 555-0011"
profileName="🔥Flames🔥"
avatarPath={util.gifObjectUrl}
onClick={() => console.log('onClick')}
/>
<ContactListItem
i18n={util.i18n}
name="Another ❄️ Yes"
phoneNumber="(202) 555-0011"
profileName="❄️Ice❄️"
avatarPath={util.gifObjectUrl}
onClick={() => console.log('onClick')}
/>
</div>
With name and profile, verified
<ContactListItem
i18n={util.i18n}
name="Someone 🔥 Somewhere"
phoneNumber="(202) 555-0011"
profileName="🔥Flames🔥"
verified
avatarPath={util.gifObjectUrl}
onClick={() => console.log('onClick')}
/>
With name and profile, no avatar
<ContactListItem
i18n={util.i18n}
name="Someone 🔥 Somewhere"
color="teal"
phoneNumber="(202) 555-0011"
profileName="🔥Flames🔥"
onClick={() => console.log('onClick')}
/>
Profile, no name, no avatar
<ContactListItem
i18n={util.i18n}
phoneNumber="(202) 555-0011"
profileName="🔥Flames🔥"
onClick={() => console.log('onClick')}
/>
Verified, profile, no name, no avatar
<ContactListItem
i18n={util.i18n}
phoneNumber="(202) 555-0011"
profileName="🔥Flames🔥"
verified
onClick={() => console.log('onClick')}
/>
No name, no profile, no avatar
<ContactListItem
i18n={util.i18n}
phoneNumber="(202) 555-0011"
onClick={() => console.log('onClick')}
/>
Verified, no name, no profile, no avatar
<ContactListItem
i18n={util.i18n}
phoneNumber="(202) 555-0011"
verified
onClick={() => console.log('onClick')}
/>