Proyectos de Subversion LeadersLinked - Antes de SPA

/* eslint-disable react/prop-types */

import React, { useState } from 'react'

import parse from "html-react-parser";

import moment from 'moment'

import { BiShareAlt } from 'react-icons/bi'

import { EmailIcon, EmailShareButton, FacebookIcon, FacebookShareButton, RedditIcon, RedditShareButton, TelegramIcon, TelegramShareButton, TwitterIcon, TwitterShareButton, WhatsappIcon, WhatsappShareButton } from 'react-share';

import { useRef } from 'react';

export default function PostView({ post = {} }) {

    const baseUrl = `/storage/type/post/code/${post.uuid}/filename/`

    const shareContainer = useRef(null)

    const [shareOptions, setShareOptions] = useState(false)

    return (

        <div className='container h-100'>

            <div

                className='row p-2 m-2 h-100'

                style={{ backgroundColor: 'white' }}

            >

                <div className='col-md-6 col-sm-12 col-12'>

                    <div className="card justify-content-center h-100 border-none">

                        <img className="card-img-top border" src={baseUrl + post.image} alt={post.title} />

                    </div>

                </div>

                <div className='col-md-6 col-sm-12 col-12 d-flex align-items-center position-relative'>

                    <div className="card border-0">

                        <div className="card-body">

                            <h1 className="card-title font-weight-bold border-bottom">{post.title}</h1>

                            <p> {moment(post.date).format('DD-MM-YYYY')} </p>

                            <p className="card-text">

                                {parse(post.description)}

                            </p>

                            {

                                !!post.file &&

                                <a href={baseUrl + post.file} target='_blank' className="btn btn-primary mt-2" rel="noreferrer">

                                    <i className="fa fa-file" /> Ver adjunto

                                </a>

                            }

                        </div>

                    </div>

                    <button

                        className="btn p-0 position-absolute"

                        onClick={() => setShareOptions(!shareOptions)}

                        style={{ right: '1rem', top: '0', fontSize: '1.5rem' }}

                    >

                        <BiShareAlt />

                    </button>

                    {

                        shareOptions &&

                        <div className="ext_share post" ref={shareContainer}>

                            <FacebookShareButton url={post.share_external_url}>

                                <FacebookIcon size={32} round />

                            </FacebookShareButton>

                            <TwitterShareButton url={post.share_external_url}>

                                <TwitterIcon size={32} round />

                            </TwitterShareButton>

                            <TelegramShareButton url={post.share_external_url}>

                                <TelegramIcon size={32} round />

                            </TelegramShareButton>

                            <WhatsappShareButton url={post.share_external_url}>

                                <WhatsappIcon size={32} round />

                            </WhatsappShareButton>

                            <RedditShareButton url={post.share_external_url}>

                                <RedditIcon size={32} round />

                            </RedditShareButton>

                            <EmailShareButton url={post.share_external_url}>

                                <EmailIcon size={32} round />

                            </EmailShareButton>

                        </div>

                    }

                </div>

            </div>

        </div >

    )

}