40 lines
1.0 KiB
TypeScript
40 lines
1.0 KiB
TypeScript
"use client";
|
|
|
|
import { ChangeEvent } from "react";
|
|
import { Input } from "@/components/ui/input";
|
|
|
|
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 ? (
|
|
<img
|
|
src={imagePreview}
|
|
alt="Preview"
|
|
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>
|
|
); |