jonny/Signal-Desktop
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity
Signal-Desktop/ts/components/ContactListItem.md

2 KiB
Raw Blame History

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')}
/>