/* eslint-disable @next/next/no-img-element */ 'use client' import { ChevronLeft, ChevronRight, Expand, X } from 'lucide-react' import { useCallback, useEffect, useRef, useState } from 'react' import { Dialog, DialogClose, DialogContent, DialogDescription, DialogTitle, } from '@/components/ui/dialog' const projects = [ { title: 'Northstar', description: 'A product analytics workspace for focused, accountable teams.', image: 'https://images.unsplash.com/photo-1551288049-bebda4e38f71?auto=format&fit=crop&w=1200&q=80', }, { title: 'Papertrail', description: 'A calm publishing system for product updates and documentation.', image: 'https://images.unsplash.com/photo-1499750310107-5fef28a66643?auto=format&fit=crop&w=1200&q=80', }, { title: 'Orbit', description: 'A collaborative planning tool that keeps important work visible.', image: 'https://images.unsplash.com/photo-1516321318423-f06f85e504b3?auto=format&fit=crop&w=1200&q=80', }, ] export default function ProjectGalleryOne() { const [activeIndex, setActiveIndex] = useState(null) const lastTriggerRef = useRef(null) const activeProject = activeIndex === null ? null : projects[activeIndex] const showPrevious = useCallback(() => { setActiveIndex((current) => current === null ? 0 : (current - 1 + projects.length) % projects.length, ) }, []) const showNext = useCallback(() => { setActiveIndex((current) => (current === null ? 0 : (current + 1) % projects.length)) }, []) useEffect(() => { if (activeIndex === null) return const onKeyDown = (event: KeyboardEvent) => { if (event.key === 'ArrowLeft') { event.preventDefault() showPrevious() } if (event.key === 'ArrowRight') { event.preventDefault() showNext() } } window.addEventListener('keydown', onKeyDown) return () => window.removeEventListener('keydown', onKeyDown) }, [activeIndex, showNext, showPrevious]) return ( ) }

A horizontal project gallery

{project.title}