agrega cuadro para compartir

package.json

@@ -30,6 +30,7 @@
     "react-dom": "^18",
     "react-redux": "^8.1.3",
     "react-remark": "^2.1.0",
+    "react-share": "^5.0.3",
     "redux-persist": "^6.0.0",
     "redux-persist-cookie-storage": "^1.0.0",
     "slate-react": "^0.99.0",

src/components/pacto/body/resumen.jsx

@@ -27,7 +27,7 @@ export default function ResumenBody({ project }) {
                 </div>
 
                 <div className="content mt-6 resumen-about-pt is-italic  is-size-6 is-size-7-touch is-flex">
-                    <span className="is-size-4">* </span>
+                    <span className="is-size-4 mr-2">* </span>
                     <div>
                     <Remark>{project.about_pt}</Remark>
 

src/components/pacto/header/edit-project.jsx

@@ -0,0 +1,10 @@
+'use client'
+import Link from "next/link";
+import { useSelector } from "react-redux";
+
+const EditProject = ({project}) => {
+    const { user } = useSelector(state => state.auth)    
+    if(user && (user.role === 'admin' || project.author._id === user._id)) return ( <Link href={`/pacto/${project.slug}/editar`} className="px-4 pb-2 has-background-primary has-text-white is-flex is-align-items-center is-hidden-touch">Editar pacto</Link>)
+}
+
+export default EditProject

src/components/pacto/header/index.jsx

@@ -8,7 +8,8 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faShareNodes } from "@fortawesome/free-solid-svg-icons";
 import Link from "next/link";
 import StageProject from "@/components/common/stage-project";
-import EditPacto from "./edit-pacto";
+import EditProject from "./edit-project";
+import SharedProjectButton from "./shared-project-button";
 
 
 export default function HeaderPropuesta({ project, section }) {
@@ -61,10 +62,9 @@ export default function HeaderPropuesta({ project, section }) {
                             <li className={section === 'pacto' ? 'is-active' : ''} ><Link href={`/pacto/${project.slug}/articulado`} > Pacto</Link></li>
                             <li className={section === 'hoja' ? 'is-active' : ''} ><Link href={`/pacto/${project.slug}/hoja-de-ruta`} >Hoja de ruta</Link></li>
                         </ul>
-                    <EditPacto projectSlug={project.slug}/>
+                    <EditProject project={project}/>
                     </div>
-
-                    <button className="button shared-button px-3 "> <span className="is-hidden-touch" >Compartir proyecto </span> <span className="is-hidden-desktop" >Compartir</span> <FontAwesomeIcon className="is-hidden-touch" icon={faShareNodes} /></button>
+                    <SharedProjectButton project={project}/>
                 </div>
             </div>
 

src/components/pacto/header/shared-project-button.jsx

@@ -0,0 +1,63 @@
+'use client'
+import { faFacebook, faInstagram, faWhatsapp, faXTwitter } from "@fortawesome/free-brands-svg-icons"
+import { faShareNodes } from "@fortawesome/free-solid-svg-icons"
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
+import { usePathname } from "next/navigation"
+import { useState } from "react"
+import { FacebookShareButton, FacebookShareCount, InstapaperShareButton, TwitterShareButton, WhatsappShareButton } from "react-share"
+
+const SharedProjectButton = ({ project }) => {
+    const [show, setShow] = useState(false)
+    const url = window.location.origin
+
+    return (
+        <div className={`dropdown ${show ? 'is-active' : ''}`}>
+            <div className="dropdown-trigger">
+                <button className="button shared-button px-3 " onClick={() => setShow(!show)}>
+                    <span className="is-hidden-touch" >
+                        Compartir proyecto
+                    </span>
+                    <span className="is-hidden-desktop" >
+                        Compartir
+                    </span>
+                    <FontAwesomeIcon className="is-hidden-touch" icon={faShareNodes} />
+                </button>
+
+            </div>
+            <div className="dropdown-menu" id="dropdown-menu2" role="menu">
+                <div className="dropdown-content">
+                    <div className="dropdown-item has-text-centered">
+                        <p>Compartí este proyecto en </p>
+                    </div>
+                    <hr class="dropdown-divider"/>
+                    <div className="is-flex is-justify-content-space-evenly">
+
+                        <FacebookShareButton
+                            url={`https://pacto.resurgentes.org/pacto/${project.slug}`}
+                            hashtag="#pactoInterCiudad">
+                            <FontAwesomeIcon size="2xl" icon={faFacebook} className="has-text-primary" />
+                        </FacebookShareButton>
+                        <TwitterShareButton
+                            url={`https://pacto.resurgentes.org/pacto/${project.slug}`}
+                            hashtag="#pactoInterCiudad"
+                            title="mira este proyecto de proteccion ambiental"
+                        >
+                            <FontAwesomeIcon size="2xl" icon={faXTwitter} className="has-text-black" />
+                        </TwitterShareButton>
+                        <WhatsappShareButton
+                            url={`https://pacto.resurgentes.org/pacto/${project.slug}`}
+                            title="mira este proyecto de proteccion ambiental"
+                            style={{ color: "#25D366" }}
+                        >
+                            <FontAwesomeIcon size="2xl" icon={faWhatsapp} />
+                        </WhatsappShareButton>
+
+                    </div>
+
+                </div>
+            </div>
+        </div>
+    )
+}
+
+export default SharedProjectButton

src/static/scss/pacto.scss

@@ -197,6 +197,13 @@
               margin-left: 4px;
             }
           }
+          .dropdown{
+            .dropdown-menu{
+              min-width: 19rem;
+              left:auto;
+              right: 0;
+            }
+          }
         }
       }
     }