Image modal

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 }} />