feat: add share modal

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;
+  }
+}

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,
       )}

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}