refactor(docs): pagination dx

apps/docs/content/components/pagination/boundaries.raw.jsx

@@ -0,0 +1,14 @@
+import {Pagination} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <div className="flex flex-col gap-5">
+      <p>1 Boundary (default)</p>
+      <Pagination color="secondary" total={10} />
+      <p>2 Boundaries</p>
+      <Pagination boundaries={2} color="secondary" total={10} />
+      <p>3 Boundaries</p>
+      <Pagination boundaries={3} color="secondary" total={10} />
+    </div>
+  );
+}

apps/docs/content/components/pagination/boundaries.ts

@@ -1,28 +1,4 @@
-const App = `import {Pagination, Button} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <div className="flex flex-col gap-5">
-      <p>1 Boundary (default)</p>
-      <Pagination
-        total={10}
-        color="secondary"
-      />
-      <p>2 Boundaries</p>
-      <Pagination
-        total={10}
-        boundaries={2}
-        color="secondary"
-      />
-      <p>3 Boundaries</p>
-      <Pagination
-        total={10}
-        boundaries={3}
-        color="secondary"
-      />
-    </div>
-  );
-}`;
+import App from "./boundaries.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,

apps/docs/content/components/pagination/colors.raw.jsx

@@ -0,0 +1,13 @@
+import {Pagination} from "@nextui-org/react";
+
+export default function App() {
+  const colors = ["primary", "secondary", "success", "warning", "danger"];
+
+  return (
+    <div className="flex flex-wrap gap-4 items-center">
+      {colors.map((color) => (
+        <Pagination key={color} color={color} initialPage={1} total={10} />
+      ))}
+    </div>
+  );
+}

apps/docs/content/components/pagination/colors.ts

@@ -1,17 +1,4 @@
-const App = `import {Pagination} from "@nextui-org/react";
-
-export default function App() {
-
-  const colors = ["primary", "secondary", "success", "warning", "danger"]
-
-  return (
-    <div className="flex flex-wrap gap-4 items-center">
-      {colors.map((color) => (
-        <Pagination key={color} total={10} initialPage={1} color={color} />
-      ))}
-    </div>
-  );
-}`;
+import App from "./colors.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,

apps/docs/content/components/pagination/compact.raw.jsx

@@ -0,0 +1,5 @@
+import {Pagination} from "@nextui-org/react";
+
+export default function App() {
+  return <Pagination isCompact showControls initialPage={1} total={10} />;
+}

apps/docs/content/components/pagination/compact.ts

@@ -1,10 +1,4 @@
-const App = `import {Pagination} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <Pagination isCompact showControls total={10} initialPage={1} />
-  );
-}`;
+import App from "./compact.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,

apps/docs/content/components/pagination/controlled.raw.jsx

@@ -0,0 +1,30 @@
+import {Pagination, Button} from "@nextui-org/react";
+
+export default function App() {
+  const [currentPage, setCurrentPage] = React.useState(1);
+
+  return (
+    <div className="flex flex-col gap-5">
+      <p className="text-small text-default-500">Selected Page: {currentPage}</p>
+      <Pagination color="secondary" page={currentPage} total={10} onChange={setCurrentPage} />
+      <div className="flex gap-2">
+        <Button
+          color="secondary"
+          size="sm"
+          variant="flat"
+          onPress={() => setCurrentPage((prev) => (prev > 1 ? prev - 1 : prev))}
+        >
+          Previous
+        </Button>
+        <Button
+          color="secondary"
+          size="sm"
+          variant="flat"
+          onPress={() => setCurrentPage((prev) => (prev < 10 ? prev + 1 : prev))}
+        >
+          Next
+        </Button>
+      </div>
+    </div>
+  );
+}

apps/docs/content/components/pagination/controlled.ts

@@ -1,38 +1,4 @@
-const App = `import {Pagination, Button} from "@nextui-org/react";
-
-export default function App() {
-  const [currentPage, setCurrentPage] = React.useState(1);
-
-  return (
-    <div className="flex flex-col gap-5">
-      <p className="text-small text-default-500">Selected Page: {currentPage}</p>
-      <Pagination
-        total={10}
-        color="secondary"
-        page={currentPage}
-        onChange={setCurrentPage}
-      />
-      <div className="flex gap-2">
-        <Button
-          size="sm"
-          variant="flat"
-          color="secondary"
-          onPress={() => setCurrentPage((prev) => (prev > 1 ? prev - 1 : prev))}
-        >
-          Previous
-        </Button>
-        <Button
-          size="sm"
-          variant="flat"
-          color="secondary"
-          onPress={() => setCurrentPage((prev) => (prev < 10 ? prev + 1 : prev))}
-        >
-          Next
-        </Button>
-      </div>
-    </div>
-  );
-}`;
+import App from "./controlled.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,

apps/docs/content/components/pagination/controls.raw.jsx

@@ -0,0 +1,5 @@
+import {Pagination} from "@nextui-org/react";
+
+export default function App() {
+  return <Pagination showControls initialPage={1} total={10} />;
+}

apps/docs/content/components/pagination/controls.ts

@@ -1,10 +1,4 @@
-const App = `import {Pagination} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <Pagination showControls total={10} initialPage={1} />
-  );
-}`;
+import App from "./controls.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,

apps/docs/content/components/pagination/custom-impl.raw.jsx

@@ -0,0 +1,82 @@
+import {usePagination, PaginationItemType} from "@nextui-org/react";
+
+export const ChevronIcon = (props) => {
+  return (
+    <svg
+      aria-hidden="true"
+      fill="none"
+      focusable="false"
+      height="1em"
+      role="presentation"
+      viewBox="0 0 24 24"
+      width="1em"
+      {...props}
+    >
+      <path
+        d="M15.5 19l-7-7 7-7"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="1.5"
+      />
+    </svg>
+  );
+};
+
+export default function App() {
+  const {activePage, range, setPage, onNext, onPrevious} = usePagination({
+    total: 6,
+    showControls: true,
+    siblings: 10,
+    boundaries: 10,
+  });
+
+  return (
+    <div className="flex flex-col gap-2">
+      <p>Active page: {activePage}</p>
+      <ul className="flex gap-2 items-center">
+        {range.map((page) => {
+          if (page === PaginationItemType.NEXT) {
+            return (
+              <li key={page} aria-label="next page" className="w-4 h-4">
+                <button className="w-full h-full bg-default-200 rounded-full" onClick={onNext}>
+                  <ChevronIcon className="rotate-180" />
+                </button>
+              </li>
+            );
+          }
+
+          if (page === PaginationItemType.PREV) {
+            return (
+              <li key={page} aria-label="previous page" className="w-4 h-4">
+                <button className="w-full h-full bg-default-200 rounded-full" onClick={onPrevious}>
+                  <ChevronIcon />
+                </button>
+              </li>
+            );
+          }
+
+          if (page === PaginationItemType.DOTS) {
+            return (
+              <li key={page} className="w-4 h-4">
+                ...
+              </li>
+            );
+          }
+
+          return (
+            <li key={page} aria-label={`page ${page}`} className="w-4 h-4">
+              <button
+                className={cn(
+                  "w-full h-full bg-default-300 rounded-full",
+                  activePage === page && "bg-secondary",
+                )}
+                onClick={() => setPage(page)}
+              />
+            </li>
+          );
+        })}
+      </ul>
+    </div>
+  );
+}

apps/docs/content/components/pagination/custom-impl.ts

@@ -1,95 +1,7 @@
-const ChevronIcon = `export const ChevronIcon = (props) => (
-  <svg
-    aria-hidden="true"
-    fill="none"
-    focusable="false"
-    height="1em"
-    role="presentation"
-    viewBox="0 0 24 24"
-    width="1em"
-    {...props}
-  >
-    <path
-      d="M15.5 19l-7-7 7-7"
-      stroke="currentColor"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      strokeWidth="1.5"
-    />
-  </svg>
-);
-`;
-
-const App = `import {usePagination, PaginationItemType} from "@nextui-org/react";
-import {ChevronIcon} from "./ChevronIcon";
-
-export default function App() {
-  const {activePage, range, setPage, onNext, onPrevious} = usePagination({
-    total: 6,
-    showControls: true,
-    siblings: 10,
-    boundaries: 10,
-  });
-
-  return (
-    <div className="flex flex-col gap-2">
-      <p>Active page: {activePage}</p>
-      <ul className="flex gap-2 items-center">
-        {range.map((page) => {
-          if (page === PaginationItemType.NEXT) {
-            return (
-              <li key={page} aria-label="next page" className="w-4 h-4">
-                <button
-                  className="w-full h-full bg-default-200 rounded-full"
-                  onClick={onNext}
-                >
-                  <ChevronIcon className="rotate-180" />
-                </button>
-              </li>
-            );
-          }
-
-          if (page === PaginationItemType.PREV) {
-            return (
-              <li key={page} aria-label="previous page" className="w-4 h-4">
-                <button
-                  className="w-full h-full bg-default-200 rounded-full"
-                  onClick={onPrevious}
-                >
-                  <ChevronIcon />
-                </button>
-              </li>
-            );
-          }
-
-          if (page === PaginationItemType.DOTS) {
-            return (
-              <li key={page} className="w-4 h-4">
-                ...
-              </li>
-            );
-          }
-
-          return (
-            <li key={page} aria-label={\`page \${page}\`} className="w-4 h-4">
-              <button
-                className={cn(
-                  "w-full h-full bg-default-300 rounded-full",
-                  activePage === page && "bg-secondary"
-                )}
-                onClick={() => setPage(page)}
-              />
-            </li>
-          );
-        })}
-      </ul>
-    </div>
-  );
-}`;
+import App from "./custom-impl.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
-  "/ChevronIcon.jsx": ChevronIcon,
 };
 
 export default {