diff --git a/src/components/inputs/image-upload.tsx b/src/components/inputs/image-upload.tsx index 957401a3..83be4440 100644 --- a/src/components/inputs/image-upload.tsx +++ b/src/components/inputs/image-upload.tsx @@ -12,6 +12,7 @@ import { Button } from "@/components/ui/button"; import { FormControl, FormLabel } from "@/components/ui/form"; import { Input } from "@/components/ui/input"; import { ImageType } from "@/config/enums"; +import type { ImageSize } from "@/features/abstract-resource-form"; import { ApiImage, uploadFile, useMutationWrapper } from "@/features/backend"; import { declineNoun } from "@/features/polish"; import type { Resource } from "@/features/resources"; @@ -20,15 +21,40 @@ import type { ResourceSchemaKey, } from "@/features/resources/types"; import { getToastMessages } from "@/lib/get-toast-messages"; +import { cn } from "@/lib/utils"; import type { WrapperProps } from "@/types/components"; import { ImagePreviewModal } from "../presentation/image-preview-modal"; -function InputBox({ children }: WrapperProps) { +function getImageSizeClasses(size: ImageSize): string { + switch (size) { + case "small": { + return "md:size-32"; + } + case "medium": { + return "md:size-48"; + } + case "large": { + return "md:size-64"; + } + case "wide": { + return "md:h-48 md:w-full aspect-video"; + } + } +} + +function InputBox({ + children, + size = "medium", +}: WrapperProps & { size?: ImageSize }) { return ( {children} @@ -41,6 +67,7 @@ export function ImageUpload({ value, label, type = ImageType.Logo, + size = "medium", existingImage, resourceData, disabled, @@ -50,6 +77,7 @@ export function ImageUpload({ onChange: (value: string | null) => void; label: string; type?: ImageType; + size?: ImageSize; existingImage?: ReactNode; resourceData?: ResourceFormValues; disabled?: boolean; @@ -112,7 +140,7 @@ export function ImageUpload({ {label} {hasImage ? null : ( - + @@ -123,7 +151,7 @@ export function ImageUpload({ )} {hasImage ? ( - + = Partial< export interface AbstractResourceFormInputs { /** Image upload inputs for image key fields. */ - imageInputs?: FormInput; + imageInputs?: FormInput< + T, + z.ZodString, + { type: ImageType; size?: ImageSize } + >; /** Standard text input fields. */ textInputs?: FormInput; /** Number input fields for numeric values. */ diff --git a/src/features/resources/data/resource-metadata.ts b/src/features/resources/data/resource-metadata.ts index 2fe1e81e..bca8b475 100644 --- a/src/features/resources/data/resource-metadata.ts +++ b/src/features/resources/data/resource-metadata.ts @@ -156,7 +156,11 @@ export const RESOURCE_METADATA = { description: { label: "Opis" }, }, imageInputs: { - coverPhotoKey: { label: "Zdjęcie w tle", type: ImageType.Banner }, + coverPhotoKey: { + label: "Zdjęcie w tle", + type: ImageType.Banner, + size: "wide", + }, }, }, defaultValues: { @@ -546,7 +550,7 @@ export const RESOURCE_METADATA = { form: { inputs: { imageInputs: { - imageKey: { label: "Zdjęcie", type: ImageType.Banner }, + imageKey: { label: "Zdjęcie", type: ImageType.Banner, size: "wide" }, }, textInputs: { title: { label: "Tytuł" }, @@ -851,8 +855,8 @@ export const RESOURCE_METADATA = { form: { inputs: { imageInputs: { - logoKey: { label: "Logo", type: ImageType.Logo }, - coverKey: { label: "Baner", type: ImageType.Banner }, + logoKey: { label: "Logo", type: ImageType.Logo, size: "small" }, + coverKey: { label: "Baner", type: ImageType.Banner, size: "wide" }, }, textInputs: { name: { label: "Nazwa" },