slate/components/core/Profile.js
2020-09-09 20:29:08 -07:00

114 lines
2.9 KiB
JavaScript

import * as React from "react";
import * as Constants from "~/common/constants";
import { css } from "@emotion/react";
import { ProcessedText } from "~/components/system/components/Typography";
import SlatePreviewBlock from "~/components/core/SlatePreviewBlock";
const STYLES_PROFILE = css`
text-align: center;
width: 100%;
margin-top: 16px;
`;
const STYLES_PROFILE_IMAGE = css`
background-color: ${Constants.system.foreground};
background-size: cover;
background-position: 50% 50%;
width: 152px;
height: 152px;
border-radius: 4px;
margin: 0 auto;
padding: 0;
`;
const STYLES_NAME = css`
font-size: ${Constants.typescale.lvl3};
font-family: ${Constants.font.medium};
width: 100%;
max-width: 420px;
margin: 0 auto;
padding: 0 24px 0 24px;
overflow: hidden;
text-overflow: ellipsis;
`;
const STYLES_DESCRIPTION = css`
font-size: ${Constants.typescale.lvl1};
width: 100%;
max-width: 800px;
margin: 0 auto;
padding: 0 24px 0 24px;
word-wrap: break-word;
`;
const STYLES_LINK = css`
color: ${Constants.system.black};
text-decoration: none;
`;
export default class Profile extends React.Component {
render() {
let data = this.props.creator ? this.props.creator : this.props.data;
return (
<div css={STYLES_PROFILE}>
<div
css={STYLES_PROFILE_IMAGE}
style={{ backgroundImage: `url('${data.data.photo}')` }}
/>
<br />
<div css={STYLES_NAME}>{data.data.name || data.username}</div>
<br />
{data.data.body ? (
<React.Fragment>
<div css={STYLES_DESCRIPTION}>
<ProcessedText text={data.data.body} />
</div>
<br />
</React.Fragment>
) : null}
<br />
{this.props.buttons}
<br />
{data.slates && data.slates.length ? (
<div>
{data.slates.map((slate) => {
if (this.props.onAction) {
return (
<div
key={slate.id}
onClick={() =>
this.props.onAction({
type: "NAVIGATE",
value: this.props.sceneId,
scene: "PUBLIC_SLATE",
data: slate,
})
}
>
<SlatePreviewBlock
slate={slate}
username={data.username}
editing={this.props.editing}
/>
</div>
);
}
return (
<a
key={slate.id}
href={`/${data.username}/${slate.slatename}`}
css={STYLES_LINK}
>
<SlatePreviewBlock external slate={slate} />
</a>
);
})}
</div>
) : null}
</div>
);
}
}