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, FacebookMessengerIcon, FacebookMessengerShareButton, FacebookShareButton, PinterestIcon, PinterestShareButton, RedditIcon, RedditShareButton, TelegramIcon, TelegramShareButton, TumblrIcon, TumblrShareButton, TwitterIcon, TwitterShareButton, WhatsappIcon, WhatsappShareButton, WorkplaceIcon, WorkplaceShareButton } 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>
                            <FacebookMessengerShareButton url={post.share_external_url}>
                                <FacebookMessengerIcon size={32} round />
                            </FacebookMessengerShareButton>
                            <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>
                            <PinterestShareButton url={post.share_external_url}>
                                <PinterestIcon size={32} round />
                            </PinterestShareButton>
                            <RedditShareButton url={post.share_external_url}>
                                <RedditIcon size={32} round />
                            </RedditShareButton>
                            <TumblrShareButton url={post.share_external_url}>
                                <TumblrIcon size={32} round />
                            </TumblrShareButton>
                            <WorkplaceShareButton url={post.share_external_url}>
                                <WorkplaceIcon size={32} round />
                            </WorkplaceShareButton>
                            <EmailShareButton url={post.share_external_url}>
                                <EmailIcon size={32} round />
                            </EmailShareButton>
                        </div>
                    }
                </div>
            </div>
        </div >
    )
}