53 lines
1.4 KiB
JavaScript
53 lines
1.4 KiB
JavaScript
'use client'
|
|
|
|
import Image from 'next/image'
|
|
import { useRef } from 'react'
|
|
|
|
import { Control, FieldError, useFieldArray } from 'react-hook-form'
|
|
|
|
import { UploadImage, Icons } from 'components'
|
|
|
|
const ImageList = props => {
|
|
//? Props
|
|
const { control, errors } = props
|
|
|
|
//? Refs
|
|
// const inputRef = useRef<HTMLInputElement | null>(null)
|
|
|
|
//? Form Hook
|
|
const { fields, append, remove } = useFieldArray({
|
|
name: 'images',
|
|
control,
|
|
})
|
|
|
|
const handleAddUploadedImageUrl = url => append({ url })
|
|
|
|
//? Render(s)
|
|
return (
|
|
<div className="space-y-3">
|
|
<UploadImage folder="/products" handleAddUploadedImageUrl={handleAddUploadedImageUrl} />
|
|
|
|
<div className="flex flex-wrap mx-3 gap-x-2 gap-y-3">
|
|
{fields.map((image, idx) => (
|
|
<div
|
|
className="relative overflow-hidden transition-colors border border-gray-200 rounded-md max-w-max hover:border-gray-300"
|
|
key={idx}
|
|
>
|
|
<Image src={image.url} width={150} height={150} alt="product image" />
|
|
<button
|
|
type="button"
|
|
className="absolute z-10 -top-1 -right-1"
|
|
onClick={() => remove(idx)}
|
|
title="删除"
|
|
>
|
|
<Icons.Delete className="p-1 text-red-500 bg-red-100 icon w-7 h-7 rounded-2xl" />
|
|
</button>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default ImageList
|