From e5a69d9f37a61de38119960f85a6934cbed8e0b7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=D5=A1=D3=84=D5=A1?= <wingkwong.code@gmail.com>
Date: Sat, 23 Nov 2024 05:08:45 +0800
Subject: [PATCH] refactor(docs): image dx (#4061)

---
 .../docs/content/components/image/blurred.raw.jsx | 13 +++++++++++++
 apps/docs/content/components/image/blurred.ts     | 14 +-------------
 .../content/components/image/fallback.raw.jsx     | 13 +++++++++++++
 apps/docs/content/components/image/fallback.ts    | 14 +-------------
 .../docs/content/components/image/loading.raw.jsx | 12 ++++++++++++
 apps/docs/content/components/image/loading.ts     | 13 +------------
 apps/docs/content/components/image/nextjs.raw.jsx | 14 ++++++++++++++
 apps/docs/content/components/image/nextjs.ts      | 15 +--------------
 apps/docs/content/components/image/usage.raw.jsx  | 11 +++++++++++
 apps/docs/content/components/image/usage.ts       | 12 +-----------
 apps/docs/content/components/image/zoomed.raw.jsx | 12 ++++++++++++
 apps/docs/content/components/image/zoomed.ts      | 13 +------------
 12 files changed, 81 insertions(+), 75 deletions(-)
 create mode 100644 apps/docs/content/components/image/blurred.raw.jsx
 create mode 100644 apps/docs/content/components/image/fallback.raw.jsx
 create mode 100644 apps/docs/content/components/image/loading.raw.jsx
 create mode 100644 apps/docs/content/components/image/nextjs.raw.jsx
 create mode 100644 apps/docs/content/components/image/usage.raw.jsx
 create mode 100644 apps/docs/content/components/image/zoomed.raw.jsx

diff --git a/apps/docs/content/components/image/blurred.raw.jsx b/apps/docs/content/components/image/blurred.raw.jsx
new file mode 100644
index 0000000000..c1bcc75e14
--- /dev/null
+++ b/apps/docs/content/components/image/blurred.raw.jsx
@@ -0,0 +1,13 @@
+import {Image} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <Image
+      isBlurred
+      alt="NextUI Album Cover"
+      className="m-5"
+      src="https://nextui.org/images/album-cover.png"
+      width={240}
+    />
+  );
+}
diff --git a/apps/docs/content/components/image/blurred.ts b/apps/docs/content/components/image/blurred.ts
index 379e433c7a..0c08e28f90 100644
--- a/apps/docs/content/components/image/blurred.ts
+++ b/apps/docs/content/components/image/blurred.ts
@@ -1,16 +1,4 @@
-const App = `import {Image} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <Image
-      isBlurred
-      width={240}
-      src="https://nextui.org/images/album-cover.png"
-      alt="NextUI Album Cover"
-      className="m-5"
-    />
-  );
-}`;
+import App from "./blurred.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/image/fallback.raw.jsx b/apps/docs/content/components/image/fallback.raw.jsx
new file mode 100644
index 0000000000..dba0cca441
--- /dev/null
+++ b/apps/docs/content/components/image/fallback.raw.jsx
@@ -0,0 +1,13 @@
+import {Image} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <Image
+      alt="NextUI Image with fallback"
+      fallbackSrc="https://via.placeholder.com/300x200"
+      height={200}
+      src="https://app.requestly.io/delay/1000/https://nextui.org/images/fruit-4.jpeg"
+      width={300}
+    />
+  );
+}
diff --git a/apps/docs/content/components/image/fallback.ts b/apps/docs/content/components/image/fallback.ts
index 165089d80a..20854071f7 100644
--- a/apps/docs/content/components/image/fallback.ts
+++ b/apps/docs/content/components/image/fallback.ts
@@ -1,16 +1,4 @@
-const App = `import {Image} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <Image
-      width={300}
-      height={200}
-      src="https://app.requestly.io/delay/1000/https://nextui.org/images/fruit-4.jpeg"
-      fallbackSrc="https://via.placeholder.com/300x200"
-      alt="NextUI Image with fallback"
-    />
-  );
-}`;
+import App from "./fallback.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/image/loading.raw.jsx b/apps/docs/content/components/image/loading.raw.jsx
new file mode 100644
index 0000000000..3ad1b17619
--- /dev/null
+++ b/apps/docs/content/components/image/loading.raw.jsx
@@ -0,0 +1,12 @@
+import {Image} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <Image
+      alt="NextUI hero Image with delay"
+      height={200}
+      src="https://app.requestly.io/delay/5000/https://nextui.org/images/hero-card-complete.jpeg"
+      width={300}
+    />
+  );
+}
diff --git a/apps/docs/content/components/image/loading.ts b/apps/docs/content/components/image/loading.ts
index e2d70af02f..0c8fea5a5f 100644
--- a/apps/docs/content/components/image/loading.ts
+++ b/apps/docs/content/components/image/loading.ts
@@ -1,15 +1,4 @@
-const App = `import {Image} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <Image
-      width={300}
-      height={200}
-      alt="NextUI hero Image with delay"
-      src="https://app.requestly.io/delay/5000/https://nextui.org/images/hero-card-complete.jpeg"
-    />
-  );
-}`;
+import App from "./loading.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/image/nextjs.raw.jsx b/apps/docs/content/components/image/nextjs.raw.jsx
new file mode 100644
index 0000000000..deee4e2121
--- /dev/null
+++ b/apps/docs/content/components/image/nextjs.raw.jsx
@@ -0,0 +1,14 @@
+import {Image} from "@nextui-org/react";
+import NextImage from "next/image";
+
+export default function App() {
+  return (
+    <Image
+      alt="NextUI hero Image"
+      as={NextImage}
+      height={200}
+      src="https://nextui.org/images/hero-card-complete.jpeg"
+      width={300}
+    />
+  );
+}
diff --git a/apps/docs/content/components/image/nextjs.ts b/apps/docs/content/components/image/nextjs.ts
index ff6a18e14e..1d69196630 100644
--- a/apps/docs/content/components/image/nextjs.ts
+++ b/apps/docs/content/components/image/nextjs.ts
@@ -1,17 +1,4 @@
-const App = `import {Image} from "@nextui-org/react";
-import NextImage from "next/image";
-
-export default function App() {
-  return (
-    <Image
-      as={NextImage}
-      width={300}
-      height={200}
-      src="https://nextui.org/images/hero-card-complete.jpeg"
-      alt="NextUI hero Image"
-    />
-  );
-}`;
+import App from "./nextjs.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/image/usage.raw.jsx b/apps/docs/content/components/image/usage.raw.jsx
new file mode 100644
index 0000000000..f7be019c8d
--- /dev/null
+++ b/apps/docs/content/components/image/usage.raw.jsx
@@ -0,0 +1,11 @@
+import {Image} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <Image
+      alt="NextUI hero Image"
+      src="https://nextui.org/images/hero-card-complete.jpeg"
+      width={300}
+    />
+  );
+}
diff --git a/apps/docs/content/components/image/usage.ts b/apps/docs/content/components/image/usage.ts
index 7041554fed..1118304c37 100644
--- a/apps/docs/content/components/image/usage.ts
+++ b/apps/docs/content/components/image/usage.ts
@@ -1,14 +1,4 @@
-const App = `import {Image} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <Image
-      width={300}
-      alt="NextUI hero Image"
-      src="https://nextui.org/images/hero-card-complete.jpeg"
-    />
-  );
-}`;
+import App from "./usage.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/image/zoomed.raw.jsx b/apps/docs/content/components/image/zoomed.raw.jsx
new file mode 100644
index 0000000000..8e05d6217b
--- /dev/null
+++ b/apps/docs/content/components/image/zoomed.raw.jsx
@@ -0,0 +1,12 @@
+import {Image} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <Image
+      isZoomed
+      alt="NextUI Fruit Image with Zoom"
+      src="https://nextui.org/images/fruit-1.jpeg"
+      width={240}
+    />
+  );
+}
diff --git a/apps/docs/content/components/image/zoomed.ts b/apps/docs/content/components/image/zoomed.ts
index 2aaa13b28f..19b1fbb781 100644
--- a/apps/docs/content/components/image/zoomed.ts
+++ b/apps/docs/content/components/image/zoomed.ts
@@ -1,15 +1,4 @@
-const App = `import {Image} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <Image
-      isZoomed
-      width={240}
-      alt="NextUI Fruit Image with Zoom"
-      src="https://nextui.org/images/fruit-1.jpeg"
-    />
-  );
-}`;
+import App from "./zoomed.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,