From 35e32152b153f4dfaf9e071f526f6d7602ea97fc Mon Sep 17 00:00:00 2001
From: MAZE <remvze@proton.me>
Date: Tue, 2 Jan 2024 19:48:57 +0330
Subject: [PATCH] feat: add share modal

---
 .../menu/items/share/share.module.css         | 27 +++++++++++++++++++
 src/components/menu/items/share/share.tsx     | 13 ++++++++-
 src/components/menu/menu.tsx                  |  2 +-
 3 files changed, 40 insertions(+), 2 deletions(-)

diff --git a/src/components/menu/items/share/share.module.css b/src/components/menu/items/share/share.module.css
index 077d40a..474ac86 100644
--- a/src/components/menu/items/share/share.module.css
+++ b/src/components/menu/items/share/share.module.css
@@ -1,4 +1,31 @@
 .heading {
   font-family: var(--font-heading);
+  font-size: var(--font-md);
   font-weight: 700;
 }
+
+.desc {
+  margin-top: 12px;
+  line-height: 1.6;
+  color: var(--color-foreground-subtle);
+}
+
+.inputWrapper {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  height: 45px;
+  margin-top: 12px;
+  background-color: var(--color-neutral-50);
+  border: 1px solid var(--color-neutral-200);
+  border-radius: 4px;
+
+  & input {
+    flex-grow: 1;
+    height: 100%;
+    color: red;
+    background: transparent;
+    border: none;
+    outline: none;
+  }
+}
diff --git a/src/components/menu/items/share/share.tsx b/src/components/menu/items/share/share.tsx
index cf0f264..3b42623 100644
--- a/src/components/menu/items/share/share.tsx
+++ b/src/components/menu/items/share/share.tsx
@@ -1,5 +1,6 @@
 import { useState } from 'react';
 import { createPortal } from 'react-dom';
+import { IoCopyOutline } from 'react-icons/io5/index';
 
 import { Modal } from '@/components/modal';
 
@@ -16,7 +17,17 @@ export function Share() {
 
       {createPortal(
         <Modal show={isModalOpen} onClose={() => setIsModalOpen(false)}>
-          <h1 className={styles.heading}>Share Sounds!</h1>
+          <h1 className={styles.heading}>Share your sound selection!</h1>
+          <p className={styles.desc}>
+            Copy and send the following link to the person you want to share
+            your selection with.
+          </p>
+          <div className={styles.inputWrapper}>
+            <input type="text" onFocus={e => e.stopPropagation()} />
+            <button>
+              <IoCopyOutline />
+            </button>
+          </div>
         </Modal>,
         document.body,
       )}
diff --git a/src/components/menu/menu.tsx b/src/components/menu/menu.tsx
index 9b906ff..6e06340 100644
--- a/src/components/menu/menu.tsx
+++ b/src/components/menu/menu.tsx
@@ -57,7 +57,7 @@ export function Menu() {
 
       <AnimatePresence>
         {isOpen && (
-          <FloatingFocusManager context={context} modal={false}>
+          <FloatingFocusManager context={context}>
             <div
               ref={refs.setFloating}
               style={floatingStyles}