render placeholder for profile details

This commit is contained in:
Roland Osborne 2022-09-02 10:37:01 -07:00
parent 9219cf6a5b
commit 5820ec7e2d
4 changed files with 46 additions and 6 deletions

View File

@ -30,7 +30,12 @@ export function Contact({ close, guid, listing }) {
const Details = (
<div class="details">
<div class="name">
{ state.name && (
<div class="data">{ state.name }</div>
)}
{ !state.name && (
<div class="data notset">name</div>
)}
</div>
{ state.node && (
<div class="location">
@ -40,11 +45,21 @@ export function Contact({ close, guid, listing }) {
)}
<div class="location">
<EnvironmentOutlined />
{ state.location && (
<div class="data">{ state.location }</div>
)}
{ !state.location && (
<div class="data notset">location</div>
)}
</div>
<div class="description">
<BookOutlined />
{ state.description && (
<div class="data">{ state.description }</div>
)}
{ !state.description && (
<div class="data notset">description</div>
)}
</div>
{ state.status === 'connected' && (

View File

@ -53,6 +53,11 @@ export const ContactWrapper = styled.div`
display: flex;
flex-direction: column;
.notset {
font-style: italic;
color: ${Colors.grey};
}
.name {
display: flex;
flex-direction: row;

View File

@ -72,18 +72,33 @@ export function Profile({ closeProfile }) {
const Details = (
<div class="details">
<div class="name" onClick={actions.setEditProfileDetails}>
{ state.name && (
<div class="data">{ state.name }</div>
)}
{ !state.name && (
<div class="data notset">name</div>
)}
<div class="icon">
<EditOutlined />
</div>
</div>
<div class="location">
<EnvironmentOutlined />
{ state.location && (
<div class="data">{ state.location }</div>
)}
{ !state.location && (
<div class="data notset">location</div>
)}
</div>
<div class="description">
<BookOutlined />
{ state.description && (
<div class="data">{ state.description }</div>
)}
{ !state.description && (
<div class="data notset">description</div>
)}
</div>
</div>
);

View File

@ -73,6 +73,11 @@ export const ProfileWrapper = styled.div`
display: flex;
flex-direction: column;
.notset {
font-style: italic;
color: ${Colors.grey};
}
.name {
display: flex;
flex-direction: row;