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">
            <div className='postContainer mx-auto col-md-8'>
                <div className="row">
                    <div className="col-md-7">
                        <div className="job_descp">
                            <img
                                alt={post.title}
                                src={baseUrl + post.image}
                                className="Entradas"
                            />
                        </div>
                        <div className="job-status-bar">
                            <ul className="reactions-list">
                                <li className="position-relative">
                                    <button
                                        type="button"
                                        className="btn-indicator"
                                        onClick={() => setShareOptions(!shareOptions)}
                                    >
                                        <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>
                                    }
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div className="col-md-5">
                        <div className="post_topbar" >
                            <div className="usy-dt">
                                <div className="usy-name">
                                    <h3>{post.title}</h3>
                                    <span>
                                        {moment(post.date).format('DD-MM-YYYY')}
                                    </span>
                                </div>
                            </div>
                        </div >
                        <div className="job_descp">
                            <div className="show-read-more">
                                {parse(post.description)}
                            </div>
                        </div>
                    </div>
                </div>
            </div >
        </div>
    )
}