Files
StevenandGitHub 4466ba436b chore(examples): use default prettier for examples/templates (#60530)
## Description
This PR ensures that the default prettier config is used for examples
and templates.

This config is compatible with `prettier@3` as well (upgrading prettier
is bigger change that can be a future PR).

## Changes
- Updated `.prettierrc.json` in root with `"trailingComma": "es5"` (will
be needed upgrading to prettier@3)
- Added `examples/.prettierrc.json` with default config (this will
change every example)
- Added `packages/create-next-app/templates/.prettierrc.json` with
default config (this will change every template)

## Related

- Fixes #54402
- Closes #54409
2024-01-11 16:01:44 -07:00

46 lines
1.2 KiB
TypeScript

import React, { ElementType, Fragment, Ref } from "react";
import { Video } from "./Video";
import { Image } from "./Image";
import { StaticImageData } from "next/image";
import { Media as MediaType } from "../../payload-types";
export type Props = {
src?: StaticImageData; // for static media
alt?: string;
resource?: MediaType; // for Payload media
size?: string; // for NextImage only
priority?: boolean; // for NextImage only
fill?: boolean; // for NextImage only
className?: string;
imgClassName?: string;
videoClassName?: string;
htmlElement?: ElementType | null;
onClick?: () => void;
onLoad?: () => void;
ref?: Ref<null | HTMLImageElement | HTMLVideoElement>;
};
export const Media: React.FC<Props> = (props) => {
const { className, resource, htmlElement = "div" } = props;
const isVideo =
typeof resource !== "string" && resource?.mimeType?.includes("video");
const Tag = (htmlElement as ElementType) || Fragment;
return (
<Tag
{...(htmlElement !== null
? {
className,
}
: {})}
>
{isVideo ? (
<Video {...props} />
) : (
<Image {...props} /> // eslint-disable-line
)}
</Tag>
);
};