Import repositories from gitlab

next/components/imagePopup/index.jsx

@@ -0,0 +1,32 @@
+import styles from './style.module.scss';
+
+export default function ImagePopup({toggleShowPopup, src, alt, ...props}) {
+    return (
+        <div className={styles.modal}>
+            <button onClick={toggleShowPopup} className={styles.close}>
+                <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    width="36"
+                    height="36"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    strokeWidth="1"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    className="feather feather-x"
+                >
+                    <line x1="18" y1="6" x2="6" y2="18" />
+                    <line x1="6" y1="6" x2="18" y2="18" />
+                </svg>
+            </button>
+            <div onClick={toggleShowPopup} className={styles.imgModal} />
+            <img
+                {...props}
+                src={src}
+                alt={alt}
+                className={styles.popupImage}
+            />
+        </div>
+    );
+}

next/components/imagePopup/style.module.scss

@@ -0,0 +1,92 @@
+.modal {
+    position: fixed;
+    left: 0;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 220;
+
+    display: flex;
+    align-items: center;
+    overflow: scroll;
+    overscroll-behavior: contain;
+    cursor: pointer;
+
+    & > div {
+        position: fixed;
+        left: 0;
+        top: 0;
+        right: 0;
+        bottom: 0;
+
+        background-color: var(--fg-0);
+        opacity: 0.65;
+        z-index: 220;
+    }
+}
+
+.popupImage {
+    margin: auto;
+    display: block;
+    max-width: 80vw;
+    max-height: 80vh;
+    animation-name: zoom;
+    animation-duration: 0.6s;
+    animation-fill-mode: both;
+    z-index: 230;
+    cursor: auto;
+}
+
+.close {
+    position: fixed;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    top: 3.6rem;
+    right: 4rem;
+    height: 3rem;
+    width: 3rem;
+    padding: 0.25rem;
+
+    appearance: none;
+    border: unset;
+    font-size: unset;
+    font-family: unset;
+
+    color: var(--bg-0);
+    background: var(--fg-0-translucid);
+    font-weight: bold;
+    transition: 0.3s;
+    cursor: pointer;
+    border-radius: 100%;
+    z-index: 230;
+
+    svg {
+        height: 3rem;
+        width: 3rem;
+    }
+}
+
+.close:hover {
+    top: 3.2rem;
+    right: 3.6rem;
+    height: 3.8rem;
+    width: 3.8rem;
+
+    svg {
+        height: 3.8rem;
+        width: 3.8rem;
+    }
+}
+
+@keyframes zoom {
+    from {
+        transform:scale(0);
+        box-shadow: 0 0 0.2rem rgba(0,0,0,0.5);
+    }
+    to {
+        transform:scale(1);
+        box-shadow: 0 0 1rem rgba(0,0,0,0.5);
+    }
+}