98 lines
3.0 KiB
TypeScript
98 lines
3.0 KiB
TypeScript
import { useRef } from "react";
|
|
import { Upload, Camera } from "lucide-react";
|
|
|
|
interface ImageUploadProps {
|
|
imagePreviewUrl: string | null;
|
|
onUploadClick: () => void;
|
|
onImageSelect: (event: React.ChangeEvent<HTMLInputElement>) => void;
|
|
}
|
|
|
|
export const ImageUpload = ({
|
|
imagePreviewUrl,
|
|
onUploadClick,
|
|
onImageSelect,
|
|
}: ImageUploadProps) => {
|
|
const fileInputRef = useRef<HTMLInputElement>(null);
|
|
|
|
return (
|
|
<div className="flex flex-col gap-2 items-center">
|
|
<div className="relative">
|
|
<div
|
|
className="relative w-24 h-24 rounded-full border-2 border-dashed border-GRAY3 flex items-center justify-center bg-WHITE3 cursor-pointer"
|
|
onClick={onUploadClick}
|
|
onKeyDown={(e) =>
|
|
(e.key === "Enter" || e.key === " ") && onUploadClick()
|
|
}
|
|
role="button"
|
|
tabIndex={0}
|
|
aria-label="Upload store logo"
|
|
>
|
|
{imagePreviewUrl ? (
|
|
<img
|
|
src={imagePreviewUrl}
|
|
alt="Store Logo"
|
|
className="w-full h-full rounded-full object-cover"
|
|
/>
|
|
) : (
|
|
<Upload size={32} className="text-GRAY" />
|
|
)}
|
|
<div className="absolute -bottom-2 -right-2 w-10 h-10 bg-WHITE rounded-full shadow-md border-2 border-WHITE2 flex items-center justify-center">
|
|
<Camera size={24} className="text-BLACK2" />
|
|
</div>
|
|
</div>
|
|
<input
|
|
ref={fileInputRef}
|
|
type="file"
|
|
accept="image/*"
|
|
onChange={onImageSelect}
|
|
className="hidden"
|
|
/>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
export const ProductImageUpload = ({
|
|
imagePreviewUrl,
|
|
onUploadClick,
|
|
onImageSelect,
|
|
}: ImageUploadProps) => {
|
|
const fileInputRef = useRef<HTMLInputElement>(null);
|
|
|
|
return (
|
|
<div className="flex flex-col gap-2 items-center">
|
|
<div className="relative">
|
|
<div
|
|
className="relative w-24 h-24 rounded-full border-2 border-dashed border-GRAY3 flex items-center justify-center bg-WHITE3 cursor-pointer"
|
|
onClick={onUploadClick}
|
|
onKeyDown={(e) =>
|
|
(e.key === "Enter" || e.key === " ") && onUploadClick()
|
|
}
|
|
role="button"
|
|
tabIndex={0}
|
|
aria-label="Upload store logo"
|
|
>
|
|
{imagePreviewUrl ? (
|
|
<img
|
|
src={imagePreviewUrl}
|
|
alt="Store Logo"
|
|
className="w-full h-full rounded-full object-cover"
|
|
/>
|
|
) : (
|
|
<Upload size={32} className="text-GRAY" />
|
|
)}
|
|
<div className="absolute -bottom-2 -right-2 w-10 h-10 bg-WHITE rounded-full shadow-md border-2 border-WHITE2 flex items-center justify-center">
|
|
<Camera size={24} className="text-BLACK2" />
|
|
</div>
|
|
</div>
|
|
<input
|
|
ref={fileInputRef}
|
|
type="file"
|
|
accept="image/*"
|
|
onChange={onImageSelect}
|
|
className="hidden"
|
|
/>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|