refactor(docs): code dx (#4046)

heroui-inc · Nov 14, 2024 · 1fe7eb2 · 1fe7eb2
1 parent 6d7e098
commit 1fe7eb2
Show file tree

Hide file tree

Showing 6 changed files with 33 additions and 32 deletions.
diff --git a/apps/docs/content/components/code/colors.raw.jsx b/apps/docs/content/components/code/colors.raw.jsx
@@ -0,0 +1,14 @@
+import {Code} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <div className="flex flex-wrap gap-4">
+      <Code color="default">npm install @nextui-org/react</Code>
+      <Code color="primary">npm install @nextui-org/react</Code>
+      <Code color="secondary">npm install @nextui-org/react</Code>
+      <Code color="success">npm install @nextui-org/react</Code>
+      <Code color="warning">npm install @nextui-org/react</Code>
+      <Code color="danger">npm install @nextui-org/react</Code>
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/code/colors.ts b/apps/docs/content/components/code/colors.ts
@@ -1,17 +1,4 @@
-const App = `import {Code} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <div className="flex flex-wrap gap-4">
-      <Code color="default">npm install @nextui-org/react</Code>
-      <Code color="primary">npm install @nextui-org/react</Code>
-      <Code color="secondary">npm install @nextui-org/react</Code>
-      <Code color="success">npm install @nextui-org/react</Code>
-      <Code color="warning">npm install @nextui-org/react</Code>
-      <Code color="danger">npm install @nextui-org/react</Code>
-    </div> 
-  );
-}`;
+import App from "./colors.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,

diff --git a/apps/docs/content/components/code/sizes.raw.jsx b/apps/docs/content/components/code/sizes.raw.jsx
@@ -0,0 +1,11 @@
+import {Code} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <div className="flex flex-col gap-4">
+      <Code size="sm">npm install @nextui-org/react</Code>
+      <Code size="md">npm install @nextui-org/react</Code>
+      <Code size="lg">npm install @nextui-org/react</Code>
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/code/sizes.ts b/apps/docs/content/components/code/sizes.ts
@@ -1,14 +1,4 @@
-const App = `import {Code} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <div className="flex flex-col gap-4">
-      <Code size="sm">npm install @nextui-org/react</Code>
-      <Code size="md">npm install @nextui-org/react</Code>
-      <Code size="lg">npm install @nextui-org/react</Code>
-    </div>
-  );
-}`;
+import App from "./sizes.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,

diff --git a/apps/docs/content/components/code/usage.raw.jsx b/apps/docs/content/components/code/usage.raw.jsx
@@ -0,0 +1,5 @@
+import {Code} from "@nextui-org/react";
+
+export default function App() {
+  return <Code>npm install @nextui-org/react</Code>;
+}
diff --git a/apps/docs/content/components/code/usage.ts b/apps/docs/content/components/code/usage.ts
@@ -1,10 +1,4 @@
-const App = `import {Code} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <Code>npm install @nextui-org/react</Code>
-  );
-}`;
+import App from "./usage.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,