Agregar enlace a documentos legales

PyConColombia · Dec 18, 2023 · e61fef8 · e61fef8
1 parent cfeb9b9
commit e61fef8
Show file tree

Hide file tree

Showing 3 changed files with 89 additions and 1 deletion.
diff --git a/src/components/FooterLayout.js b/src/components/FooterLayout.js
@@ -14,8 +14,48 @@ import {
   faGithubAlt
 } from '@fortawesome/free-brands-svg-icons';
 import { StaticImage } from 'gatsby-plugin-image';
+import ModalDocFooter from './modalDocFooter';
 
 const FooterLayout = () => {
+  const docsUrlLegal = [
+    {
+      name: 'Acta de constitución',
+      url: 'https://drive.google.com/file/d/1Xtwy38BR6d0CTDZoYYvizop-JdIIGfuA/preview'
+    },
+    {
+      name: 'Renovación ESAL',
+      url: 'https://drive.google.com/file/d/1rgCZNkkVJWxWy9e5iUS3rZGEW1jVYMHH/preview'
+    },
+    {
+      name: 'Rut',
+      url: 'https://drive.google.com/file/d/1p2CAwGxSXsH9kg5GgMav29_QkmAhNQ6V/preview'
+    },
+    {
+      name: 'Cámara de comercio',
+      url: 'https://drive.google.com/file/d/1DZfYrftzffmNBLpJDQgp7xXgbfQlcDLN/preview'
+    },
+    {
+      name: 'Estatutos',
+      url: 'https://drive.google.com/file/d/1znErsdiiKNr9ct2qN_d_kYhsSCJdE3rD/preview'
+    },
+    {
+      name: 'Certificación DIAN 2023',
+      url: 'https://drive.google.com/file/d/1x525xP9tmu6WXSQi7y0VlJc6kZEIfgca/preview'
+    },
+    {
+      name: 'Fundadores PyCon',
+      url: 'https://drive.google.com/file/d/1jOhE7B7KscOA_eE5jm5pzLxmagy5zvoC/preview'
+    },
+    {
+      name: 'Cargos gerenciales',
+      url: 'https://drive.google.com/file/d/1QJrN5_J3N7ZVhgE0g0ioyv8uIJ51HbOX/preview'
+    },
+    {
+      name: 'Donantes',
+      url: 'https://drive.google.com/file/d/1VL7ruPPVTteir3-L-QM9lTo2OFEDyNFO/preview'
+    }
+  ];
+
   return (
     <footer id="footer">
       <div className="footer-wrapper">
@@ -30,7 +70,11 @@ const FooterLayout = () => {
               <div className="footer-label">Legales</div>
               <div className="footer-separator"></div>
               <ul>
-                <li>Acta de constitución</li>
+                {docsUrlLegal.map(({ name, url }, index) => (
+                  <li key={index}>
+                    <ModalDocFooter title={name} url={url} />
+                  </li>
+                ))}
               </ul>
             </Col>
             <Col xs={12} md={6} lg={4} className="footer-column">

diff --git a/src/components/ModalDocFooter.js b/src/components/ModalDocFooter.js
@@ -0,0 +1,26 @@
+import React, { useState } from 'react';
+import Button from 'react-bootstrap/Button';
+import Modal from 'react-bootstrap/Modal';
+
+const ModalDocFooter = ({ title, url }) => {
+  const [show, setShow] = useState(false);
+
+  const handleClose = () => setShow(false);
+  const handleShow = () => setShow(true);
+
+  return (
+    <>
+      <div onClick={handleShow} className='modal-label'>{title}</div>
+      <Modal show={show} onHide={handleClose} size="xl" centered>
+        <Modal.Header closeButton>
+          <Modal.Title>{title}</Modal.Title>
+        </Modal.Header>
+        <Modal.Body>
+          <iframe src={url} class="iframe-docs" width="100%" height="300px"></iframe>
+        </Modal.Body>
+      </Modal>
+    </>
+  );
+};
+
+export default ModalDocFooter;
diff --git a/src/static/styles/partials/_footer.sass b/src/static/styles/partials/_footer.sass
@@ -38,3 +38,21 @@
     .social-icon
       color: variables.$main-bg-color
 
+  .modal-label
+    cursor: pointer
+
+  .modal-content
+    background-color: variables.$main-bg-color
+    // .modal-dialog
+    //   max-width: 1024px
+    //   width: 90%
+    //   height: 500px
+
+    //   .modal-content
+    //     height: 100%
+    .modal-header
+      background-color: variables.$secondary-bg-color
+      color: variables.$main-text-color
+      border: none
+
+