First commit

2026-08-29 10:12:59 +03:30
commit 52226e9636
53 changed files with 7707 additions and 0 deletions
@@ -0,0 +1,100 @@
+import React, { useCallback, useEffect } from 'react'
+import { AnimatePresence, motion } from 'framer-motion'
+import { XIcon, ChevronLeftIcon, ChevronRightIcon } from 'lucide-react'
+
+type Props = {
+  images: string[]
+  index: number | null
+  onClose: () => void
+  onChange: (index: number) => void
+}
+
+export function Lightbox({ images, index, onClose, onChange }: Props) {
+  const isOpen = index !== null
+
+  const next = useCallback(() => {
+    if (index === null) return
+    onChange((index + 1) % images.length)
+  }, [index, images.length, onChange])
+
+  const prev = useCallback(() => {
+    if (index === null) return
+    onChange((index - 1 + images.length) % images.length)
+  }, [index, images.length, onChange])
+
+  useEffect(() => {
+    if (!isOpen) return
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') onClose()
+      if (e.key === 'ArrowRight') prev()
+      if (e.key === 'ArrowLeft') next()
+    }
+    window.addEventListener('keydown', onKey)
+    document.body.style.overflow = 'hidden'
+    return () => {
+      window.removeEventListener('keydown', onKey)
+      document.body.style.overflow = ''
+    }
+  }, [isOpen, onClose, next, prev])
+
+  return (
+    <AnimatePresence>
+      {isOpen && (
+        <motion.div
+          role="dialog"
+          aria-modal="true"
+          className="fixed inset-0 z-[90] flex items-center justify-center p-5 md:p-10"
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 1 }}
+          exit={{ opacity: 0 }}
+          transition={{ duration: 0.3, ease: [0.23, 1, 0.32, 1] }}
+        >
+          <div
+            className="absolute inset-0 bg-ink/90 backdrop-blur-md"
+            onClick={onClose}
+            aria-hidden="true"
+          />
+
+          <button
+            type="button"
+            onClick={onClose}
+            className="absolute left-6 top-6 z-10 flex h-12 w-12 items-center justify-center border border-ivory/20 text-ivory transition-colors duration-200 ease-lux hover:border-copper hover:text-copper md:left-10 md:top-10"
+          >
+            <XIcon className="h-5 w-5" />
+          </button>
+
+          <motion.img
+            key={index}
+            src={images[index as number]}
+            alt=""
+            className="relative max-h-[80vh] w-auto max-w-full object-contain"
+            initial={{ opacity: 0, scale: 0.96 }}
+            animate={{ opacity: 1, scale: 1 }}
+            exit={{ opacity: 0, scale: 0.96 }}
+            transition={{ duration: 0.3, ease: [0.23, 1, 0.32, 1] }}
+          />
+
+          <div className="absolute bottom-6 z-10 flex items-center gap-4 md:bottom-10">
+            <button
+              type="button"
+              onClick={prev}
+              className="flex h-11 w-11 items-center justify-center border border-ivory/20 text-ivory transition-colors duration-200 ease-lux hover:border-copper hover:text-copper"
+            >
+              <ChevronRightIcon className="h-5 w-5" />
+            </button>
+            <span className="text-sm font-light text-ivory/70" dir="ltr">
+              {(index as number) + 1} / {images.length}
+            </span>
+            <button
+              type="button"
+              onClick={next}
+              className="flex h-11 w-11 items-center justify-center border border-ivory/20 text-ivory transition-colors duration-200 ease-lux hover:border-copper hover:text-copper"
+            >
+              <ChevronLeftIcon className="h-5 w-5" />
+            </button>
+          </div>
+        </motion.div>
+      )}
+    </AnimatePresence>
+  )
+}