antontranelis/utopia-ui
1
0
Fork 0
mirror of https://github.com/utopia-os/utopia-ui.git synced 2026-03-01 12:44:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add dialog for delete confirmation

Browse Source
This commit is contained in:
Maximilian Harz 2025-06-05 19:46:58 +02:00
parent 85f3141a42
commit 5c413d466b
1 changed files with 64 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

95
src/Components/Profile/Subcomponents/GalleryForm.tsx
View File

@ -5,6 +5,7 @@ import { useState } from 'react'
import { useDropzone } from 'react-dropzone'
import { useAppState } from '#components/AppShell/hooks/useAppState'
import DialogModal from '#components/Templates/DialogModal'
import type { FormState } from '#types/FormState'
@ -24,6 +25,10 @@ export const GalleryForm = ({ state, setState }: Props) => {
const [uploadingImages, setUploadingImages] = useState<File[]>([])
const [deleteModalImage, setDeleteModalImage] = useState<number | null>(null)
const closeModal = () => setDeleteModalImage(null)
const upload = async (acceptedFiles: File[]) => {
setUploadingImages((files) => [...files, ...acceptedFiles])
@ -82,38 +87,66 @@ export const GalleryForm = ({ state, setState }: Props) => {
}
return (
<div className='tw:flex tw:flex-wrap tw:gap-4 tw:my-4'>
{images.map((image, index) => (
<div key={index} className='tw:relative'>
<img
src={image.src}
alt={`Gallery image ${index + 1}`}
className={`tw:w-60 tw:h-60 tw:object-cover tw:rounded-lg ${
image.state === 'uploading' ? 'tw:opacity-50' : ''
}`}
/>
{image.state === 'uploading' && (
<span className='tw:loading tw:loading-spinner tw:absolute tw:inset-0 tw:m-auto'></span>
)}
{image.state === 'uploaded' && (
<button
className='tw:m-2 tw:bg-red-500 tw:text-white tw:p-2 tw:rounded-full tw:absolute tw:top-0 tw:right-0 tw:hover:bg-red-600'
onClick={() => removeImage(index)}
type='button'
>
<TrashIcon className='tw:h-5 tw:w-5' />
</button>
)}
</div>
))}
<>
<div className='tw:flex tw:flex-wrap tw:gap-4 tw:my-4'>
{images.map((image, index) => (
<div key={index} className='tw:relative'>
<img
src={image.src}
alt={`Gallery image ${index + 1}`}
className={`tw:w-60 tw:h-60 tw:object-cover tw:rounded-lg ${
image.state === 'uploading' ? 'tw:opacity-50' : ''
}`}
/>
{image.state === 'uploading' && (
<span className='tw:loading tw:loading-spinner tw:absolute tw:inset-0 tw:m-auto'></span>
)}
{image.state === 'uploaded' && (
<button
className='tw:m-2 tw:bg-red-500 tw:text-white tw:p-2 tw:rounded-full tw:absolute tw:top-0 tw:right-0 tw:hover:bg-red-600'
onClick={() => setDeleteModalImage(index)}
type='button'
>
<TrashIcon className='tw:h-5 tw:w-5' />
</button>
)}
</div>
))}
<div
{...getRootProps()}
className='tw:flex tw:center tw:w-60 tw:h-60 tw:cursor-pointer tw:border tw:border-dashed tw:border-gray-300 tw:p-4 tw:rounded-lg'
>
<input {...getInputProps()} />
<ArrowUpTrayIcon className='tw:h-8 tw:w-8 tw:m-auto' />
<div
{...getRootProps()}
className='tw:flex tw:center tw:w-60 tw:h-60 tw:cursor-pointer tw:border tw:border-dashed tw:border-gray-300 tw:p-4 tw:rounded-lg'
>
<input {...getInputProps()} />
<ArrowUpTrayIcon className='tw:h-8 tw:w-8 tw:m-auto' />
</div>
</div>
</div>
<DialogModal
isOpened={!!deleteModalImage}
title='Are you sure?'
showCloseButton={false}
onClose={closeModal}
>
<div onClick={(e) => e.stopPropagation()}>
<span>Do you want to delete this image?</span>
<div className='tw:grid'>
<div className='tw:flex tw:justify-between'>
<label
className='tw:btn tw:mt-4 tw:btn-error'
onClick={() => {
deleteModalImage && removeImage(deleteModalImage)
closeModal()
}}
>
Yes
</label>
<label className='tw:btn tw:mt-4' onClick={closeModal}>
No
</label>
</div>
</div>
</div>
</DialogModal>
</>
)
}