From 22f8b3e42ccf20a3cef61bb484c8ee9a589a097d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Germ=C3=A1n=20Saracca?= <gersaracca@gmail.com>
Date: Wed, 20 Nov 2024 15:16:00 -0300
Subject: [PATCH] feat: share modal ui done

---
 .../share-button/ShareButton.module.scss      | 57 +++++++++++++++++++
 .../collection/share-button/ShareButton.tsx   | 28 +++++++++
 .../collection/share-button/ShareModal.tsx    | 52 +++++++++++++++++
 3 files changed, 137 insertions(+)
 create mode 100644 src/sections/collection/share-button/ShareButton.module.scss
 create mode 100644 src/sections/collection/share-button/ShareButton.tsx
 create mode 100644 src/sections/collection/share-button/ShareModal.tsx

diff --git a/src/sections/collection/share-button/ShareButton.module.scss b/src/sections/collection/share-button/ShareButton.module.scss
new file mode 100644
index 000000000..ce6285b05
--- /dev/null
+++ b/src/sections/collection/share-button/ShareButton.module.scss
@@ -0,0 +1,57 @@
+@import 'node_modules/@iqss/dataverse-design-system/src/lib/assets/styles/design-tokens/colors.module';
+
+.share-icon {
+  margin-right: 0.3rem;
+  margin-bottom: 0.2rem;
+}
+
+// Modal styles
+
+.help-block {
+  color: $dv-subtext-color;
+  font-size: 14px;
+}
+
+.social-btn {
+  display: grid;
+  place-items: center;
+  padding: 8px 12px;
+  background-color: transparent;
+  border: 0;
+  border-radius: 6px;
+  transition: all 0.15s ease-in-out;
+
+  &:hover {
+    scale: 1.1;
+    box-shadow: 2px 2px 10px rgb(0 0 0 / 30%);
+  }
+
+  &:active {
+    scale: 1;
+    box-shadow: none;
+  }
+
+  &.fb {
+    background-color: #3a5795;
+
+    svg {
+      color: #fff;
+    }
+  }
+
+  &.x {
+    background-color: #000;
+
+    svg {
+      color: #fff;
+    }
+  }
+
+  &.linkedin {
+    background-color: #6f5499;
+
+    svg {
+      color: #fff;
+    }
+  }
+}
diff --git a/src/sections/collection/share-button/ShareButton.tsx b/src/sections/collection/share-button/ShareButton.tsx
new file mode 100644
index 000000000..cc7e75078
--- /dev/null
+++ b/src/sections/collection/share-button/ShareButton.tsx
@@ -0,0 +1,28 @@
+import { useState } from 'react'
+import { Button, Tooltip } from '@iqss/dataverse-design-system'
+import { ShareFill } from 'react-bootstrap-icons'
+import { ShareModal } from './ShareModal'
+import styles from './ShareButton.module.scss'
+
+export const ShareButton = () => {
+  const [showShareModal, setShowShareModal] = useState(false)
+
+  const openShareModal = () => setShowShareModal(true)
+  const closeShareModal = () => setShowShareModal(false)
+
+  return (
+    <>
+      <Tooltip overlay="Share Collection" placement="top">
+        <Button
+          variant="link"
+          onClick={openShareModal}
+          className={styles['share-btn']}
+          icon={<ShareFill className={styles['share-icon']} />}>
+          Share
+        </Button>
+      </Tooltip>
+
+      <ShareModal show={showShareModal} handleClose={closeShareModal} />
+    </>
+  )
+}
diff --git a/src/sections/collection/share-button/ShareModal.tsx b/src/sections/collection/share-button/ShareModal.tsx
new file mode 100644
index 000000000..a04256c4d
--- /dev/null
+++ b/src/sections/collection/share-button/ShareModal.tsx
@@ -0,0 +1,52 @@
+import { Button, Modal, Stack } from '@iqss/dataverse-design-system'
+import { Facebook, Linkedin, TwitterX } from 'react-bootstrap-icons'
+import styles from './ShareButton.module.scss'
+
+interface ShareModalProps {
+  show: boolean
+  handleClose: () => void
+}
+
+export const ShareModal = ({ show, handleClose }: ShareModalProps) => {
+  return (
+    <Modal show={show} onHide={handleClose} centered>
+      <Modal.Header>
+        <Modal.Title>Share Collection</Modal.Title>
+      </Modal.Header>
+      <Modal.Body>
+        <p className={styles['help-block']}>
+          Share this collection on your favorite social media networks.
+        </p>
+
+        <Stack direction="horizontal">
+          <button
+            type="button"
+            aria-label="LinkedIn"
+            title="LinkedIn"
+            className={`${styles['social-btn']} ${styles.linkedin}`}>
+            <Linkedin size={18} />
+          </button>
+          <button
+            type="button"
+            aria-label="X, formerly Twitter"
+            title="X, formerly Twitter"
+            className={`${styles['social-btn']} ${styles.x}`}>
+            <TwitterX size={18} />
+          </button>
+          <button
+            type="button"
+            aria-label="Facebook"
+            title="Facebook"
+            className={`${styles['social-btn']} ${styles.fb}`}>
+            <Facebook size={18} />
+          </button>
+        </Stack>
+      </Modal.Body>
+      <Modal.Footer>
+        <Button variant="secondary" onClick={handleClose} type="submit">
+          Close
+        </Button>
+      </Modal.Footer>
+    </Modal>
+  )
+}