Image Grid - Copy this React, Tailwind Component to your project

'use client' import { DialogContext } from '@/contexts/DialogContext' import CameraIcon from '@/public/icons/CameraIcon' import { PropertyImage } from '@prisma/client' import Image from 'next/image' import { useContext, useState } from 'react' import ImageGalleryModal from './modals/ImageModal' export default function ImageGrid({ images }: { images: PropertyImage[] }) { const { toggleOpenImages } = useContext(DialogContext) const [selectedImageIndex, setSelectedImageIndex] = useState(0) const imageCount = images.length const openModal = (index: number) => { setSelectedImageIndex(index) toggleOpenImages() } return ( <> {/* Mobile view single image */} <div className="block sm:hidden"> <div className="relative h [40dvh] w full cursor pointer" onClick={() => openModal(0)} > <Image src={images[0]?.url || '/placeholder.svg'} alt="Imagem principal" fill className="object cover" sizes="(max width: 640px) 100vw, 50vw" /> <div className="absolute bottom 4 right 4 bg black bg opacity 50 text white px 2 py 1 flex gap 2 items center text sm"> 1 / {imageCount} <CameraIcon className="h 4 w 4" /> </div> </div> </div> {/* Desktop view */} <div className="hidden sm:block"> {imageCount < 5 ? ( // Single image with count for less than 5 images <div className="relative h [40dvh] w full cursor pointer" onClick={() => openModal(0)} > <Image src={images[0]?.url || '/placeholder.svg'} alt="Imagem principal" fill className="object cover" sizes="(max width: 640px) 100vw, 50vw" priority /> <div className="absolute bottom 4 right 4 bg black bg opacity 50 text white px 2 py 1 flex gap 2 items center text sm"> 1 / {imageCount} <CameraIcon className="h 4 w 4" /> </div> </div> ) : ( // Grid view for 5 or more images <div className="grid grid cols 4 grid rows 2 gap 2 h [40dvh] md:h [60dvh] w full"> <div className="col span 2 row span 2 relative cursor pointer" onClick={() => openModal(0)} > <Image src={images[0]?.url || '/placeholder.svg'} alt="Imagem principal" fill className="object cover" sizes="(max width: 640px) 100vw, 50vw" priority /> </div> {images.slice(1, 5).map((image, index) => ( <div key={image.id} className="relative cursor pointer" onClick={() => openModal(index + 1)} > <Image src={image.url} alt={`Imagem ${index + 2}`} fill className="object cover" sizes="(max width: 640px) 25vw, 20vw" /> {index === 3 && imageCount > 5 && ( <div className="absolute inset 0 bg black bg opacity 50 flex items center justify center"> <span className="text white text 2xl"> +{imageCount 5} </span> </div> )} </div> ))} </div> )} </div> <ImageGalleryModal images={images} initialIndex={selectedImageIndex} /> </> ) } i have this image grid but its not good do you can make its better? and resposive