aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat (limited to 'components/Gallery')
-rw-r--r--components/Gallery/Gallery.module.css63
-rw-r--r--components/Gallery/Gallery.tsx80
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>
- );
-}