feat: add share placeholder

src/components/app/app.tsx

@@ -9,7 +9,6 @@ import { StoreConsumer } from '@/components/store-consumer';
 import { Buttons } from '@/components/buttons';
 import { Categories } from '@/components/categories';
 import { ScrollToTop } from '@/components/scroll-to-top';
-// import { Shuffle } from '@/components/shuffle';
 import { Menu } from '@/components/menu/menu';
 import { SnackbarProvider } from '@/contexts/snackbar';
 
@@ -62,7 +61,6 @@ export function App() {
 
         <ScrollToTop />
         <Menu />
-        {/* <Shuffle /> */}
       </StoreConsumer>
     </SnackbarProvider>
   );

src/components/menu/buttons/button.tsx

@@ -0,0 +1,14 @@
+import styles from '../menu.module.css';
+
+interface ButtonProps {
+  children: React.ReactNode;
+  onClick: () => void;
+}
+
+export function Button({ children, onClick }: ButtonProps) {
+  return (
+    <button className={styles.menuItem} onClick={onClick}>
+      {children}
+    </button>
+  );
+}

src/components/menu/buttons/index.ts

@@ -0,0 +1,2 @@
+export { ShuffleButton } from './shuffle';
+export { ShareButton } from './share';

src/components/menu/buttons/share.tsx

@@ -0,0 +1,23 @@
+import { useState } from 'react';
+import { createPortal } from 'react-dom';
+
+import { Modal } from '@/components/modal';
+
+import { Button } from './button';
+
+export function ShareButton() {
+  const [isModalOpen, setIsModalOpen] = useState(false);
+
+  return (
+    <>
+      <Button onClick={() => setIsModalOpen(true)}>Share Sounds</Button>
+
+      {createPortal(
+        <Modal show={isModalOpen} onClose={() => setIsModalOpen(false)}>
+          <h1>Share Sounds!</h1>
+        </Modal>,
+        document.body,
+      )}
+    </>
+  );
+}

src/components/menu/buttons/shuffle.tsx

@@ -0,0 +1,9 @@
+import { useSoundStore } from '@/store';
+
+import { Button } from './button';
+
+export function ShuffleButton() {
+  const shuffle = useSoundStore(state => state.shuffle);
+
+  return <Button onClick={shuffle}>Shuffle Sounds</Button>;
+}

src/components/menu/menu.module.css

@@ -24,6 +24,9 @@
   }
 
   & .menu {
+    display: flex;
+    flex-direction: column;
+    row-gap: 4px;
     width: 200px;
     padding: 4px;
     background-color: var(--color-neutral-100);

src/components/menu/menu.tsx

@@ -14,7 +14,8 @@ import {
   FloatingFocusManager,
 } from '@floating-ui/react';
 
-import { useSoundStore } from '@/store';
+import { ShuffleButton, ShareButton } from './buttons';
+
 import { slideY, fade, mix } from '@/lib/motion';
 
 import styles from './menu.module.css';
@@ -22,8 +23,6 @@ import styles from './menu.module.css';
 export function Menu() {
   const [isOpen, setIsOpen] = useState(false);
 
-  const shuffle = useSoundStore(state => state.shuffle);
-
   const variants = mix(slideY(-20), fade());
 
   const { context, floatingStyles, refs } = useFloating({
@@ -71,9 +70,8 @@ export function Menu() {
                 initial="hidden"
                 variants={variants}
               >
-                <button className={styles.menuItem} onClick={shuffle}>
+                <ShareButton />
-                  Shuffle Sounds
+                <ShuffleButton />
-                </button>
               </motion.div>
             </div>
           </FloatingFocusManager>

src/components/modal/index.ts

@@ -0,0 +1 @@
+export { Modal } from './modal';

src/components/modal/modal.module.css

@@ -0,0 +1,29 @@
+.overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 10;
+  background-color: rgb(9 9 11 / 40%);
+  backdrop-filter: blur(5px);
+}
+
+.modal {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  z-index: 12;
+  width: 100%;
+  max-height: 100%;
+  padding: 50px 0;
+  overflow-y: auto;
+  transform: translate(-50%, -50%);
+
+  & .content {
+    position: relative;
+    width: 90%;
+    max-width: 500px;
+    padding: 20px;
+    margin: 0 auto;
+    background-color: var(--color-neutral-100);
+    border-radius: 8px;
+  }
+}

src/components/modal/modal.tsx

@@ -0,0 +1,28 @@
+import { AnimatePresence } from 'framer-motion';
+
+import styles from './modal.module.css';
+
+interface ModalProps {
+  children: React.ReactNode;
+  onClose: () => void;
+  show: boolean;
+}
+
+export function Modal({ children, onClose, show }: ModalProps) {
+  return (
+    <AnimatePresence>
+      {show && (
+        <>
+          <div
+            className={styles.overlay}
+            onClick={onClose}
+            onKeyDown={onClose}
+          />
+          <div className={styles.modal}>
+            <div className={styles.content}>{children}</div>
+          </div>
+        </>
+      )}
+    </AnimatePresence>
+  );
+}

src/styles/fonts.css

@@ -33,3 +33,12 @@
   src: url('/fonts/inter-tight-v7-latin-600.woff2') format('woff2');
   font-display: swap;
 }
+
+/* inter-tight-700 - latin */
+@font-face {
+  font-family: 'Inter Tight';
+  font-style: normal;
+  font-weight: 700;
+  src: url('/fonts/inter-tight-v7-latin-700.woff2') format('woff2');
+  font-display: swap;
+}