From cc059505d9074639296afe35bb2ca9c26e57c874 Mon Sep 17 00:00:00 2001
From: Tony <legendmastertony@gmail.com>
Date: Tue, 13 Aug 2024 15:01:59 +0800
Subject: [PATCH] Fix example swapOnLoad

---
 README.md                    | 4 ++--
 example/docusaurus.config.ts | 2 +-
 example/src/pages/index.tsx  | 6 +++++-
 3 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/README.md b/README.md
index 80358b6..775548a 100644
--- a/README.md
+++ b/README.md
@@ -39,8 +39,8 @@ By default, this will transform the image into a jpeg source and a webp source a
     class="native-ideal-img"
     style="--lqip: url(data:image/webp;base64,UklGRj4AAABXRUJQVlA4IDIAAADQAQCdASoQAAwABUB8JZQAAudcoVPyIAD+uVyF4iJZsGTWpdieB7utExa6oMeh0PusAA==);"
 >
-    <source srcset="assets/native-ideal-image/some-image-b0600-2160.webp 2160w" type="image/webp" />
-    <source srcset="assets/native-ideal-image/some-image-4cb20-2160.jpeg 2160w" type="image/jpeg" />
+    <source srcset="assets/native-ideal-image/some-image-b0600-2160.webp" type="image/webp" />
+    <source srcset="assets/native-ideal-image/some-image-6ee75-2160.jpeg" type="image/jpeg" />
     <img loading="lazy" sizes="auto" width="2160" height="1620" />
 </picture>
 ```
diff --git a/example/docusaurus.config.ts b/example/docusaurus.config.ts
index 1a003b5..8574708 100644
--- a/example/docusaurus.config.ts
+++ b/example/docusaurus.config.ts
@@ -44,7 +44,7 @@ const config: Config = {
 			{
 				presets: {
 					card: {
-						sizes: [600, 1000],
+						sizes: [600, 800, 1000],
 						formats: ['avif', 'webp', 'jpeg'],
 					},
 				},
diff --git a/example/src/pages/index.tsx b/example/src/pages/index.tsx
index a38e293..f192d76 100644
--- a/example/src/pages/index.tsx
+++ b/example/src/pages/index.tsx
@@ -59,7 +59,11 @@ export default function Home(): JSX.Element {
 function Card(props: { name: string; image: LoaderOutput; swapOnLoad?: boolean }) {
 	return (
 		<div className={clsx(styles.card, 'pagination-nav__link')}>
-			<NativeIdealImage img={props.image} className={styles.cardImage} />
+			<NativeIdealImage
+				img={props.image}
+				className={styles.cardImage}
+				swapOnLoad={props.swapOnLoad}
+			/>
 			<div>{props.name}</div>
 		</div>
 	)