From e44916c09c2b0fe34adb3b276a148280ec86fd6c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=D5=A1=D3=84=D5=A1?= <wingkwong.code@gmail.com>
Date: Thu, 14 Nov 2024 04:30:51 +0800
Subject: [PATCH] refactor(docs): usage dx (#4036)

---
 .../components/user/link-description.raw.jsx   | 17 +++++++++++++++++
 .../components/user/link-description.ts        | 18 +-----------------
 .../docs/content/components/user/usage.raw.jsx | 13 +++++++++++++
 apps/docs/content/components/user/usage.ts     | 14 +-------------
 4 files changed, 32 insertions(+), 30 deletions(-)
 create mode 100644 apps/docs/content/components/user/link-description.raw.jsx
 create mode 100644 apps/docs/content/components/user/usage.raw.jsx

diff --git a/apps/docs/content/components/user/link-description.raw.jsx b/apps/docs/content/components/user/link-description.raw.jsx
new file mode 100644
index 0000000000..b0a3d2534f
--- /dev/null
+++ b/apps/docs/content/components/user/link-description.raw.jsx
@@ -0,0 +1,17 @@
+import {User, Link} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <User
+      avatarProps={{
+        src: "https://avatars.githubusercontent.com/u/30373425?v=4",
+      }}
+      description={
+        <Link isExternal href="https://x.com/jrgarciadev" size="sm">
+          @jrgarciadev
+        </Link>
+      }
+      name="Junior Garcia"
+    />
+  );
+}
diff --git a/apps/docs/content/components/user/link-description.ts b/apps/docs/content/components/user/link-description.ts
index b60cfa8b82..5122872e10 100644
--- a/apps/docs/content/components/user/link-description.ts
+++ b/apps/docs/content/components/user/link-description.ts
@@ -1,20 +1,4 @@
-const App = `import {User, Link} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <User
-      name="Junior Garcia"
-      description={(
-        <Link href="https://x.com/jrgarciadev" size="sm" isExternal>
-          @jrgarciadev
-        </Link>
-      )}
-      avatarProps={{
-        src: "https://avatars.githubusercontent.com/u/30373425?v=4"
-      }}
-    />
-  );
-}`;
+import App from "./link-description.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/user/usage.raw.jsx b/apps/docs/content/components/user/usage.raw.jsx
new file mode 100644
index 0000000000..ef7f9a95e0
--- /dev/null
+++ b/apps/docs/content/components/user/usage.raw.jsx
@@ -0,0 +1,13 @@
+import {User} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <User
+      avatarProps={{
+        src: "https://i.pravatar.cc/150?u=a04258114e29026702d",
+      }}
+      description="Product Designer"
+      name="Jane Doe"
+    />
+  );
+}
diff --git a/apps/docs/content/components/user/usage.ts b/apps/docs/content/components/user/usage.ts
index 66678b78fc..1118304c37 100644
--- a/apps/docs/content/components/user/usage.ts
+++ b/apps/docs/content/components/user/usage.ts
@@ -1,16 +1,4 @@
-const App = `import {User} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <User   
-      name="Jane Doe"
-      description="Product Designer"
-      avatarProps={{
-        src: "https://i.pravatar.cc/150?u=a04258114e29026702d"
-      }}
-    />
-  );
-}`;
+import App from "./usage.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,