Media Field

1import type { Media, MediaField as MediaFieldProps } from "~/payload-types";
2import Image from "next/image";
3import { cn } from "@/registry/ui/utils";
4import type { ComponentPropsWithoutRef } from "react";
5 
6export default function MediaField({
7	media,
8	className,
9	...imageProps
10}: { media: MediaFieldProps } & ComponentPropsWithoutRef<"img">) {
11	return (
12		<div>
13			{media.dark && (
14				<Image
15					className={cn(Boolean(media.light) && "hidden dark:block", className)}
16					// @ts-expect-error mismatch image url types from payload
17					src={(media.dark as Media).url!}
18					alt={(media.dark as Media).alt}
19					{...imageProps}
20				/>
21			)}
22			{media.light && (
23				<Image
24					className={cn(Boolean(media.dark) && "dark:hidden", className)}
25					// @ts-expect-error mismatch image url types from payload
26					src={(media.light as Media).url!}
27					alt={(media.light as Media).alt}
28					{...imageProps}
29				/>
30			)}
31		</div>
32	);
33}