slate/components/core/SlateLayoutMobile.js

59 lines
1.5 KiB
JavaScript
Raw Normal View History

2020-10-05 00:30:28 +03:00
import * as React from "react";
import * as Constants from "~/common/constants";
import SlateMediaObjectPreview from "~/components/core/SlateMediaObjectPreview";
2020-11-30 08:24:22 +03:00
import { css } from "@emotion/react";
2020-10-05 00:30:28 +03:00
const STYLES_LAYOUT = css`
display: flex;
flex-direction: column;
margin-top: 48px;
`;
const STYLES_IMAGE_CONTAINER = css`
margin-bottom: 24px;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
`;
export class SlateLayoutMobile extends React.Component {
render() {
return (
<div css={STYLES_LAYOUT}>
{this.props.items.map((item, i) => (
<div
key={item.id}
css={STYLES_IMAGE_CONTAINER}
style={{
width: `calc(100vw - 48px)`,
}}
onClick={() => this.props.onSelect(i)}
>
<SlateMediaObjectPreview
blurhash={item.blurhash}
iconOnly={this.props.fileNames}
charCap={70}
type={item.type}
url={item.url}
title={item.title || item.name}
2020-11-30 02:47:08 +03:00
coverImage={item.coverImage}
2020-10-05 00:30:28 +03:00
style={{
height: `calc(100vw - 48px)`,
width: `calc(100vw - 48px)`,
background: Constants.system.white,
}}
imageStyle={{
maxWidth: `calc(100vw - 48px)`,
maxHeight: `calc(100vw - 48px)`,
}}
/>
</div>
))}
</div>
);
}
}