diff options
Diffstat (limited to 'src/Post.js')
| -rw-r--r-- | src/Post.js | 22 |
1 files changed, 16 insertions, 6 deletions
diff --git a/src/Post.js b/src/Post.js index 054bc58..8260d1f 100644 --- a/src/Post.js +++ b/src/Post.js @@ -1,11 +1,20 @@ import React from "react"; -import { Segment, Header, Image, Label, Icon } from "semantic-ui-react"; +import { Segment, Header, Image, Label, Icon, Modal } from "semantic-ui-react"; import Moment from "react-moment"; import "moment/locale/es"; +const ImageModal = ({ href, trigger }) => ( + <Modal trigger={trigger}> + <Modal.Content image> + <Modal.Description> + <Image as="a" src={href} fluid /> + </Modal.Description> + </Modal.Content> + </Modal> +); + const Post = ({ index, post, locked, dir }) => { const filesize = require('filesize'); - let user_id = post.timestamp_formatted.split(" ID:")[1]; return ( @@ -16,15 +25,16 @@ const Post = ({ index, post, locked, dir }) => { <Header.Subheader className="inlineSubHeader"> <Moment fromNow unix locale="es" date={post.timestamp} /> </Header.Subheader> - <Label size="mini">{user_id}</Label> + {user_id ? <Label size="mini">{user_id}</Label> : null} </Header> <Segment.Group horizontal> {post.file !== "" ? <Segment compact className="imageSegment"> - <Label size="small" attached='bottom'>{post.file} {post.image_width}x{post.image_height} {filesize(post.file_size, { bits: true })}</Label> - <Image fluid src={`https://bienvenidoainternet.org/${dir}/thumb/${post.thumb}`} /> - + <Label size="tiny" attached='bottom'>{post.file} {post.image_width}x{post.image_height} + <Label.Detail>{filesize(post.file_size, { bits: true })}</Label.Detail> + </Label> + <ImageModal href={`https://bienvenidoainternet.org/${dir}/src/${post.file}`} trigger={<Image fluid src={`https://bienvenidoainternet.org/${dir}/thumb/${post.thumb}`} />} /> </Segment> : null} <Segment> <div className={`postMessage ${dir === "zonavip" ? "vipFont" : null}`} dangerouslySetInnerHTML={{ __html: post.message }} /> |