signal-desktop/ts/components/ContactListItem.md

110 lines
2 KiB
Markdown
Raw Blame History

This file contains invisible Unicode characters

This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

#### It's me!
```jsx
<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.
```jsx
<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
```jsx
<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
```jsx
<ContactListItem
i18n={util.i18n}
name="Someone 🔥 Somewhere"
color="teal"
phoneNumber="(202) 555-0011"
profileName="🔥Flames🔥"
onClick={() => console.log('onClick')}
/>
```
#### Profile, no name, no avatar
```jsx
<ContactListItem
i18n={util.i18n}
phoneNumber="(202) 555-0011"
profileName="🔥Flames🔥"
onClick={() => console.log('onClick')}
/>
```
#### Verified, profile, no name, no avatar
```jsx
<ContactListItem
i18n={util.i18n}
phoneNumber="(202) 555-0011"
profileName="🔥Flames🔥"
verified
onClick={() => console.log('onClick')}
/>
```
#### No name, no profile, no avatar
```jsx
<ContactListItem
i18n={util.i18n}
phoneNumber="(202) 555-0011"
onClick={() => console.log('onClick')}
/>
```
#### Verified, no name, no profile, no avatar
```jsx
<ContactListItem
i18n={util.i18n}
phoneNumber="(202) 555-0011"
verified
onClick={() => console.log('onClick')}
/>
```