From fe2357c995713cd0fb8335b325266859dc47a769 Mon Sep 17 00:00:00 2001 From: MAZE Date: Tue, 2 Jan 2024 17:35:10 +0330 Subject: [PATCH] feat: add share placeholder --- public/fonts/inter-tight-v7-latin-700.woff2 | Bin 0 -> 22768 bytes src/components/app/app.tsx | 2 -- src/components/menu/buttons/button.tsx | 14 ++++++++++ src/components/menu/buttons/index.ts | 2 ++ src/components/menu/buttons/share.tsx | 23 ++++++++++++++++ src/components/menu/buttons/shuffle.tsx | 9 ++++++ src/components/menu/menu.module.css | 3 ++ src/components/menu/menu.tsx | 10 +++---- src/components/modal/index.ts | 1 + src/components/modal/modal.module.css | 29 ++++++++++++++++++++ src/components/modal/modal.tsx | 28 +++++++++++++++++++ src/styles/fonts.css | 9 ++++++ 12 files changed, 122 insertions(+), 8 deletions(-) create mode 100644 public/fonts/inter-tight-v7-latin-700.woff2 create mode 100644 src/components/menu/buttons/button.tsx create mode 100644 src/components/menu/buttons/index.ts create mode 100644 src/components/menu/buttons/share.tsx create mode 100644 src/components/menu/buttons/shuffle.tsx create mode 100644 src/components/modal/index.ts create mode 100644 src/components/modal/modal.module.css create mode 100644 src/components/modal/modal.tsx diff --git a/public/fonts/inter-tight-v7-latin-700.woff2 b/public/fonts/inter-tight-v7-latin-700.woff2 new file mode 100644 index 0000000000000000000000000000000000000000..ba0b29388112ae8913d3da7738e06569bff97f42 GIT binary patch literal 22768 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 xb#aomUd3SV^EwPgo2xp9LCvG - {/* */} ); diff --git a/src/components/menu/buttons/button.tsx b/src/components/menu/buttons/button.tsx new file mode 100644 index 0000000..14a491e --- /dev/null +++ b/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 ( + + ); +} diff --git a/src/components/menu/buttons/index.ts b/src/components/menu/buttons/index.ts new file mode 100644 index 0000000..81f5f91 --- /dev/null +++ b/src/components/menu/buttons/index.ts @@ -0,0 +1,2 @@ +export { ShuffleButton } from './shuffle'; +export { ShareButton } from './share'; diff --git a/src/components/menu/buttons/share.tsx b/src/components/menu/buttons/share.tsx new file mode 100644 index 0000000..680ec5e --- /dev/null +++ b/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 ( + <> + + + {createPortal( + setIsModalOpen(false)}> +

Share Sounds!

+
, + document.body, + )} + + ); +} diff --git a/src/components/menu/buttons/shuffle.tsx b/src/components/menu/buttons/shuffle.tsx new file mode 100644 index 0000000..4e84f9e --- /dev/null +++ b/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 ; +} diff --git a/src/components/menu/menu.module.css b/src/components/menu/menu.module.css index cfb9c76..6da48f6 100644 --- a/src/components/menu/menu.module.css +++ b/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); diff --git a/src/components/menu/menu.tsx b/src/components/menu/menu.tsx index 66a936d..c92c80e 100644 --- a/src/components/menu/menu.tsx +++ b/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} > - + + diff --git a/src/components/modal/index.ts b/src/components/modal/index.ts new file mode 100644 index 0000000..0a734c9 --- /dev/null +++ b/src/components/modal/index.ts @@ -0,0 +1 @@ +export { Modal } from './modal'; diff --git a/src/components/modal/modal.module.css b/src/components/modal/modal.module.css new file mode 100644 index 0000000..453f469 --- /dev/null +++ b/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; + } +} diff --git a/src/components/modal/modal.tsx b/src/components/modal/modal.tsx new file mode 100644 index 0000000..b853edb --- /dev/null +++ b/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 ( + + {show && ( + <> +
+
+
{children}
+
+ + )} + + ); +} diff --git a/src/styles/fonts.css b/src/styles/fonts.css index 083d45a..72b5574 100644 --- a/src/styles/fonts.css +++ b/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; +}