refactor(docs): image dx (#4061)

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}
+    />
+  );
+}

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,

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}
+    />
+  );
+}

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,

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}
+    />
+  );
+}

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,

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}
+    />
+  );
+}

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,

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}
+    />
+  );
+}

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,

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}
+    />
+  );
+}

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,