Files
ember-market-frontend/components/forms/image-upload.tsx
g fe01f31538
Some checks failed
Build Frontend / build (push) Failing after 7s
Refactor UI imports and update component paths
Replaces imports from 'components/ui' with 'components/common' across the app and dashboard pages, and updates model and API imports to use new paths under 'lib'. Removes redundant authentication checks from several dashboard pages. Adds new dashboard components and utility files, and reorganizes hooks and services into the 'lib' directory for improved structure.
2026-01-13 05:02:13 +00:00

48 lines
1.5 KiB
TypeScript

"use client";
import { ChangeEvent } from "react";
import { Input } from "@/components/common/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>
);