47 lines
1.5 KiB
TypeScript
47 lines
1.5 KiB
TypeScript
"use client";
|
|
|
|
import { ChangeEvent } from "react";
|
|
import { Input } from "@/components/ui/input";
|
|
import Image from "next/image";
|
|
|
|
interface ImageUploadProps {
|
|
imagePreview: string | null;
|
|
handleImageChange: (e: ChangeEvent<HTMLInputElement>) => void;
|
|
imageDimensions: { width: number; height: number };
|
|
}
|
|
|
|
export const ImageUpload = ({
|
|
imagePreview,
|
|
handleImageChange,
|
|
imageDimensions,
|
|
}: ImageUploadProps) => (
|
|
<div>
|
|
<label className="text-sm font-medium">Product Image</label>
|
|
<div
|
|
className="relative border rounded-md flex items-center justify-center bg-transparent w-full h-48"
|
|
style={{ width: imageDimensions.width, height: imageDimensions.height }}
|
|
>
|
|
{imagePreview ? (
|
|
<Image
|
|
src={imagePreview}
|
|
alt="Preview"
|
|
width={imageDimensions.width}
|
|
height={imageDimensions.height}
|
|
priority // Load immediately since it's a preview
|
|
placeholder="blur"
|
|
blurDataURL="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAwIiBoZWlnaHQ9IjMwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSIjRjNGNEY2Ii8+PC9zdmc+"
|
|
quality={85}
|
|
className="object-contain w-full h-full rounded-md"
|
|
/>
|
|
) : (
|
|
<span className="text-gray-400 text-sm">No Image Selected</span>
|
|
)}
|
|
</div>
|
|
<Input
|
|
type="file"
|
|
accept="image/*"
|
|
onChange={handleImageChange}
|
|
className="mt-2 h-9 text-sm"
|
|
/>
|
|
</div>
|
|
); |