mirror of
https://github.com/hanzoai/next.js.git
synced 2026-09-24 17:00:51 +00:00
StevenandGitHub
4466ba436b
## 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
39 lines
1.1 KiB
TypeScript
39 lines
1.1 KiB
TypeScript
import Image, { ImageProps } from "next/image";
|
|
import ViewSource from "../../components/view-source";
|
|
import styles from "../../styles.module.css";
|
|
|
|
// Note: we cannot use `priority` or `loading="eager"
|
|
// because we depend on the default `loading="lazy"`
|
|
// behavior to wait for CSS to reveal the proper image.
|
|
type Props = Omit<ImageProps, "src" | "priority" | "loading"> & {
|
|
srcLight: string;
|
|
srcDark: string;
|
|
};
|
|
|
|
const ThemeImage = (props: Props) => {
|
|
const { srcLight, srcDark, ...rest } = props;
|
|
|
|
return (
|
|
<>
|
|
<Image {...rest} src={srcLight} className={styles.imgLight} />
|
|
<Image {...rest} src={srcDark} className={styles.imgDark} />
|
|
</>
|
|
);
|
|
};
|
|
|
|
const Page = () => (
|
|
<div>
|
|
<ViewSource pathname="app/theme/page.tsx" />
|
|
<h1>Image With Light/Dark Theme Detection</h1>
|
|
<ThemeImage
|
|
alt="Next.js Streaming"
|
|
srcLight="https://assets.vercel.com/image/upload/front/nextjs/streaming-light.png"
|
|
srcDark="https://assets.vercel.com/image/upload/front/nextjs/streaming-dark.png"
|
|
width={588}
|
|
height={387}
|
|
/>
|
|
</div>
|
|
);
|
|
|
|
export default Page;
|