diff options
Diffstat (limited to 'components/Gallery')
-rw-r--r-- | components/Gallery/Gallery.module.css | 63 | ||||
-rw-r--r-- | components/Gallery/Gallery.tsx | 80 |
2 files changed, 0 insertions, 143 deletions
diff --git a/components/Gallery/Gallery.module.css b/components/Gallery/Gallery.module.css deleted file mode 100644 index 01e8037..0000000 --- a/components/Gallery/Gallery.module.css +++ /dev/null @@ -1,63 +0,0 @@ -.galleryContainer { - padding: 20px; - position: fixed; - top: 0; - right: 0; - bottom: 0; - left: 0; - z-index: 99999; - background: rgba(0, 0, 0, 0.8); -} - -.photoContainer { - width: 100%; - height: 100%; - padding: 20px; - position: relative; -} - -.photo { - max-width: 100%; - max-height: 100%; - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); -} - -.btn { - position: absolute; - z-index: 99999; - font-size: 2rem; - color: #eee; - background: none; - border: none; - cursor: pointer; - outline: currentcolor none medium; -} - -.btn:hover { - color: #fff; -} - -.arrowLeft { - top: 50%; - left: 0; - transform: translateY(-50%); -} - -.arrowRight { - top: 50%; - right: 0; - transform: translateY(-50%); -} - -.closeBtn { - width: 64px; - height: 64px; - top: 0; - right: 0; - font-size: 4rem; - line-height: 4rem; - font-weight: 300; -} diff --git a/components/Gallery/Gallery.tsx b/components/Gallery/Gallery.tsx deleted file mode 100644 index dfadbc0..0000000 --- a/components/Gallery/Gallery.tsx +++ /dev/null @@ -1,80 +0,0 @@ -import { useEffect, useRef } from 'react'; - -import { Photo } from 'models'; -import useEvent from 'lib/useEvent'; -import styles from './Gallery.module.css'; - -interface Props { - currentPhoto: Photo; - handleClose: () => void; - handlePhotoChange: (direction: boolean) => void; -} - -export default function Gallery({ - currentPhoto, - handleClose, - handlePhotoChange, -}: Props): JSX.Element { - const wrapperRef = useRef(null); - - useEffect(() => { - function handleClickOutside(e: MouseEvent) { - if ( - wrapperRef.current && - !wrapperRef.current.contains(e.target) && - (e.target as Node).nodeName !== 'BUTTON' - ) { - handleClose(); - } - } - - document.addEventListener('mousedown', handleClickOutside); - return () => { - document.removeEventListener('mousedown', handleClickOutside); - }; - }, [wrapperRef]); - - useEvent('keydown', (e: KeyboardEvent) => { - if (e.key === 'ArrowLeft') { - handlePhotoChange(false); - } else if (e.key === 'ArrowRight') { - handlePhotoChange(true); - } else if (e.key === 'Escape') { - handleClose(); - } - }); - - return ( - <div className={styles.galleryContainer} role="region"> - <button - type="button" - className={`${styles.arrowLeft} ${styles.btn}`} - onClick={() => handlePhotoChange(false)} - > - 〈 - </button> - <div className={styles.photoContainer}> - <img - ref={wrapperRef} - src={currentPhoto.src} - alt={currentPhoto.name} - className={styles.photo} - /> - </div> - <button - type="button" - className={`${styles.arrowRight} ${styles.btn}`} - onClick={() => handlePhotoChange(true)} - > - 〉 - </button> - <button - type="button" - className={`${styles.closeBtn} ${styles.btn}`} - onClick={() => handleClose()} - > - × - </button> - </div> - ); -} |