Close

const Close = ({ customClass }) => {
	return (
		<svg
			id="close-icon"
			xmlns="http://www.w3.org/2000/svg"
			viewBox="0 0 10 10"
			pointerEvents="none"
			width={8}
			height={8}
		>
			<path
				fill="none"
				className={`${customClass || 'stroke-current'}`}
				strokeWidth={2}
				strokeLinejoin="round"
				strokeLinecap="round"
				d="M9 1L1 9M1 1l8 8"
				transform="translate(-.01 -.01)"
			/>
		</svg>
	);
};

export default Close;

CloseButton

import Close from 'components/UI/Icons/Close';

const CloseButton = ({ absolute, customSize, onClick, customClass }) => {
	return (
		<button
			onClick={onClick}
			type="button"
			className={`cursor-pointer transition-colors duration-300 ease-in-out flex shrink-0 text-gray-4 hover:text-black items-center justify-center ${
				customSize || 'w-6 h-6'
			} bg-gray-8 rounded ${absolute ? 'absolute right-2' : ''} ${
				customClass || ''
			}`.trim()}
		>
			{/* //size is transform: scale("") */}
			<Close />
		</button>
	);
};

export default CloseButton;

ImagePlaceholder

const ImagePlaceholder = ({ customClass, strokeWidth = 2 }) => {
	return (
		<svg
			id="image_placeholder"
			xmlns="http://www.w3.org/2000/svg"
			viewBox="0 0 20 20"
		>
			<path
				fill="none"
				className={`stroke-current ${customClass}`}
				strokeLinecap="round"
				strokeLinejoin="round"
				strokeWidth={2}
				d="M6.51 8A1.5 1.5 0 1 0 5 6.51 1.5 1.5 0 0 0 6.51 8ZM19 13l-5-5L3 19"
				transform="translate(-.01 -.01)"
			/>
			<path
				fill="none"
				className={`stroke-current ${customClass}`}
				strokeLinecap="round"
				strokeLinejoin="round"
				strokeWidth={strokeWidth}
				d="M17 1H3a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V3a2 2 0 0 0-2-2Z"
				transform="translate(-.01 -.01)"
			/>
		</svg>
	);
};

export default ImagePlaceholder;

ProductUploadImages

import { useTranslation } from 'next-i18next';
import { useEffect, useState } from 'react';
import CloseButton from '../../Button/CloseButton';
import ImagePlaceholder from '../../Icons/ImagePlaceholder';

const ImageLoop = ({ item, onRemove }) => {
	return (
		<div className="relative">
			<div className="relative rounded overflow-hidden h-30 border-gray-7">
				{!item.id && <img src={URL.createObjectURL(item)} alt="" />}
				{item.id && item.thumb_url && <img src={item.thumb_url} alt="" />}
			</div>
			<CloseButton onClick={onRemove} customClass="absolute -top-3 -right-3" />
		</div>
	);
};

const ProductUploadImages = ({ images = [], onRemove, onChange }) => {
	const { t } = useTranslation();

	const [items, setItems] = useState([]);

	useEffect(() => {
		onChange(items);
	}, [items]);

	return (
		<div className="space-y-4  pt-2">
			<div className="font-semibold text-16 text-black ">
				{t('add-pictures')}
			</div>
			<div className="grid grid-cols-3 gap-5">
				{images.slice().map((item, index) => {
					return (
						<ImageLoop
							key={index}
							item={item}
							onRemove={() => {
								onRemove(item.id);
							}}
						/>
					);
				})}

				{items.map((item, index) => {
					return (
						<ImageLoop
							key={index}
							item={item}
							onRemove={() => {
								setItems(
									items.filter((_, i) => {
										return i !== index;
									})
								);
							}}
						/>
					);
				})}

				<label
					htmlFor="product-images"
					className="flex flex-col cursor-pointer space-y-2 items-center justify-center h-30 rounded border border-dashed border-gray-6 hover:border-gray-darker transition-colors ease-in-out duration-300"
				>
					<input
						className="hidden"
						type="file"
						id="product-images"
						accept="image/png, image/jpeg"
						multiple
						name="product-images"
						onChange={(e) => {
							return setItems((prev) => {
								return [...prev, ...Array.prototype.slice.call(e.target.files)];
							});
						}}
					/>
					<span className="flex items-center justify-center w-6 h-6 p-0.7 text-gray-4">
						<ImagePlaceholder />
					</span>
					<span className="text-gray-3 text-15 font-medium">
						{t('add-a-picture')}
					</span>
				</label>
			</div>
		</div>
	);
};

export default ProductUploadImages;