39 lines
1.1 KiB
JavaScript
39 lines
1.1 KiB
JavaScript
'use client'
|
|
|
|
import { memo } from 'react'
|
|
import { Card, Image } from '@nextui-org/react'
|
|
|
|
function ThumbnailList(props) {
|
|
const { thumbnails, canvas } = props
|
|
|
|
const handleSelectThumb = (canvasStatus) => {
|
|
console.log('canvasStatus', canvasStatus.length)
|
|
canvas?.clear() // 캔버스를 초기화합니다.
|
|
canvas?.loadFromJSON(JSON.parse(canvasStatus), function () {
|
|
canvas?.renderAll() // 캔버스를 다시 그립니다.
|
|
})
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<div className="flex justify-center m-4 w-full">
|
|
{thumbnails.length > 0 &&
|
|
thumbnails.map((thumbnail, index) => (
|
|
<Card isFooterBlurred radius="lg" key={index} className="border-none m-2">
|
|
<Image
|
|
alt="Woman listing to music"
|
|
className="object-cover"
|
|
height={200}
|
|
src={thumbnail.imageName}
|
|
width={200}
|
|
onClick={() => handleSelectThumb(thumbnail.canvasStatus)}
|
|
/>
|
|
</Card>
|
|
))}
|
|
</div>
|
|
</>
|
|
)
|
|
}
|
|
|
|
export default memo(ThumbnailList)
|