Spaces:
Sleeping
Sleeping
File size: 2,387 Bytes
93dd66e f3a9ef2 93dd66e f3a9ef2 93dd66e f3a9ef2 93dd66e f3a9ef2 93dd66e f3a9ef2 93dd66e f3a9ef2 93dd66e f3a9ef2 93dd66e f3a9ef2 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 |
import React, { useCallback } from 'react';
import useImageUpload from '../../lib/hooks/useImageUpload';
import { useAtom, useAtomValue } from 'jotai';
import { datasetAtom } from '../../state';
import Image from 'next/image';
import { produce } from 'immer';
export interface ImageListProps {}
const ImageList: React.FC<ImageListProps> = () => {
const { getRootProps, getInputProps, isDragActive } = useImageUpload({
noClick: true,
});
const [dataset, setDataset] = useAtom(datasetAtom);
return (
<div className="relative size-full px-12 max-w-3xl mx-auto">
{dataset.length < 10 ? (
<div className="col-span-full px-8 py-4 rounded-xl bg-blue-100 text-blue-400 mb-8">
You can upload up to 10 images max by dragging image.
</div>
) : (
<div className="col-span-full px-8 py-4 rounded-xl bg-red-100 text-red-400 mb-8">
You have reached the maximum limit of 10 images.
</div>
)}
<div
{...getRootProps()}
className="grid grid-cols-1 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-2 xl:grid-cols-3 gap-4"
>
{dataset.map(entity => {
const { url: imageSrc, name, selected } = entity;
return (
<div
key={name}
onClick={() =>
setDataset(prev =>
produce(prev, draft => {
const index = draft.findIndex(d => d.name === name);
draft[index].selected = !selected;
}),
)
}
className={`relative rounded-xl overflow-hidden shadow-md cursor-pointer transition-transform hover:scale-105 box-content ${selected ? 'border-4 border-blue-500' : ''}`}
>
<Image
src={imageSrc}
draggable={false}
alt="dataset images"
width={500}
height={500}
objectFit="cover"
className="rounded-xl"
/>
<div className="absolute bottom-0 left-0 bg-gray-800/50 text-white px-3 py-1 rounded-tr-lg">
<p className="text-xs font-bold">{name}</p>
</div>
</div>
);
})}
</div>
{isDragActive && (
<div
{...getRootProps()}
className="dropzone border-2 border-dashed border-gray-400 size-full absolute top-0 left-0 flex items-center justify-center rounded-lg cursor-pointer bg-gray-500/50"
>
<input {...getInputProps()} />
<p className="text-white">Drop the files here ...</p>
</div>
)}
</div>
);
};
export default ImageList;
|