refactor(docs): link dx

apps/docs/content/components/link/block.raw.jsx

@@ -0,0 +1,26 @@
+import {Link} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <div className="flex gap-2">
+      <Link isBlock showAnchorIcon color="foreground" href="#">
+        Foreground
+      </Link>
+      <Link isBlock showAnchorIcon color="primary" href="#">
+        Primary
+      </Link>
+      <Link isBlock showAnchorIcon color="secondary" href="#">
+        Secondary
+      </Link>
+      <Link isBlock showAnchorIcon color="success" href="#">
+        Success
+      </Link>
+      <Link isBlock showAnchorIcon color="warning" href="#">
+        Warning
+      </Link>
+      <Link isBlock showAnchorIcon color="danger" href="#">
+        Danger
+      </Link>
+    </div>
+  );
+}

apps/docs/content/components/link/block.ts

@@ -1,29 +1,4 @@
-const App = `import {Link} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <div className="flex gap-2">
-      <Link isBlock showAnchorIcon href="#" color="foreground">
-        Foreground
-      </Link>
-      <Link isBlock showAnchorIcon href="#" color="primary">
-        Primary
-      </Link>
-      <Link isBlock showAnchorIcon href="#" color="secondary">
-        Secondary
-      </Link>
-      <Link isBlock showAnchorIcon href="#" color="success">
-        Success
-      </Link>
-      <Link isBlock showAnchorIcon href="#" color="warning">
-        Warning
-      </Link>
-      <Link isBlock showAnchorIcon href="#" color="danger">
-        Danger
-      </Link>
-    </div>
-  );
-}`;
+import App from "./block.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,

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

@@ -0,0 +1,26 @@
+import {Link} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <div className="flex gap-4">
+      <Link color="foreground" href="#">
+        Foreground
+      </Link>
+      <Link color="primary" href="#">
+        Primary
+      </Link>
+      <Link color="secondary" href="#">
+        Secondary
+      </Link>
+      <Link color="success" href="#">
+        Success
+      </Link>
+      <Link color="warning" href="#">
+        Warning
+      </Link>
+      <Link color="danger" href="#">
+        Danger
+      </Link>
+    </div>
+  );
+}

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

@@ -1,17 +1,4 @@
-const App = `import {Link} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <div className="flex gap-4">
-      <Link href="#" color="foreground">Foreground</Link>
-      <Link href="#" color="primary">Primary</Link>
-      <Link href="#" color="secondary">Secondary</Link>
-      <Link href="#" color="success">Success</Link>
-      <Link href="#" color="warning">Warning</Link>
-      <Link href="#" color="danger">Danger</Link>
-    </div> 
-  );
-}`;
+import App from "./colors.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,

apps/docs/content/components/link/custom-anchor-icon.raw.jsx

@@ -0,0 +1,35 @@
+import {Link} from "@nextui-org/react";
+
+export const AnchorIcon = (props) => (
+  <svg
+    aria-hidden="true"
+    focusable="false"
+    height="24"
+    role="presentation"
+    viewBox="0 0 24 24"
+    width="24"
+    {...props}
+  >
+    <path
+      d="M8.465,11.293c1.133-1.133,3.109-1.133,4.242,0L13.414,12l1.414-1.414l-0.707-0.707c-0.943-0.944-2.199-1.465-3.535-1.465 S7.994,8.935,7.051,9.879L4.929,12c-1.948,1.949-1.948,5.122,0,7.071c0.975,0.975,2.255,1.462,3.535,1.462 c1.281,0,2.562-0.487,3.536-1.462l0.707-0.707l-1.414-1.414l-0.707,0.707c-1.17,1.167-3.073,1.169-4.243,0 c-1.169-1.17-1.169-3.073,0-4.243L8.465,11.293z"
+      fill="currentColor"
+    />
+    <path
+      d="M12,4.929l-0.707,0.707l1.414,1.414l0.707-0.707c1.169-1.167,3.072-1.169,4.243,0c1.169,1.17,1.169,3.073,0,4.243 l-2.122,2.121c-1.133,1.133-3.109,1.133-4.242,0L10.586,12l-1.414,1.414l0.707,0.707c0.943,0.944,2.199,1.465,3.535,1.465 s2.592-0.521,3.535-1.465L19.071,12c1.948-1.949,1.948-5.122,0-7.071C17.121,2.979,13.948,2.98,12,4.929z"
+      fill="currentColor"
+    />
+  </svg>
+);
+
+export default function App() {
+  return (
+    <Link
+      isExternal
+      showAnchorIcon
+      anchorIcon={<AnchorIcon />}
+      href="https://github.com/nextui-org/nextui"
+    >
+      Custom Icon
+    </Link>
+  );
+}

apps/docs/content/components/link/custom-anchor-icon.ts

@@ -1,43 +1,7 @@
-const AnchorIcon = `export const AnchorIcon = (props) => (
-  <svg
-    aria-hidden="true"
-    focusable="false"
-    height="24"
-    role="presentation"
-    viewBox="0 0 24 24"
-    width="24"
-    {...props}
-  >
-    <path
-      d="M8.465,11.293c1.133-1.133,3.109-1.133,4.242,0L13.414,12l1.414-1.414l-0.707-0.707c-0.943-0.944-2.199-1.465-3.535-1.465 S7.994,8.935,7.051,9.879L4.929,12c-1.948,1.949-1.948,5.122,0,7.071c0.975,0.975,2.255,1.462,3.535,1.462 c1.281,0,2.562-0.487,3.536-1.462l0.707-0.707l-1.414-1.414l-0.707,0.707c-1.17,1.167-3.073,1.169-4.243,0 c-1.169-1.17-1.169-3.073,0-4.243L8.465,11.293z"
-      fill="currentColor"
-    />
-    <path
-      d="M12,4.929l-0.707,0.707l1.414,1.414l0.707-0.707c1.169-1.167,3.072-1.169,4.243,0c1.169,1.17,1.169,3.073,0,4.243 l-2.122,2.121c-1.133,1.133-3.109,1.133-4.242,0L10.586,12l-1.414,1.414l0.707,0.707c0.943,0.944,2.199,1.465,3.535,1.465 s2.592-0.521,3.535-1.465L19.071,12c1.948-1.949,1.948-5.122,0-7.071C17.121,2.979,13.948,2.98,12,4.929z"
-      fill="currentColor"
-    />
-  </svg>
-);`;
-
-const App = `import {Link} from "@nextui-org/react";
-import {AnchorIcon} from "./AnchorIcon";
-
-export default function App() {
-  return (
-    <Link
-      isExternal
-      showAnchorIcon
-      href="https://github.com/nextui-org/nextui"
-      anchorIcon={<AnchorIcon />}
-    >
-      Custom Icon
-    </Link>
-  );
-}`;
+import App from "./custom-anchor-icon.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
-  "/AnchorIcon.jsx": AnchorIcon,
 };
 
 export default {

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

@@ -0,0 +1,30 @@
+import {forwardRef} from "react";
+import {LinkIcon} from "@nextui-org/shared-icons";
+import {linkAnchorClasses} from "@nextui-org/theme";
+import {useLink} from "@nextui-org/react";
+
+const MyLink = forwardRef((props, ref) => {
+  const {
+    Component,
+    children,
+    showAnchorIcon,
+    anchorIcon = <LinkIcon className={linkAnchorClasses} />,
+    getLinkProps,
+  } = useLink({
+    ...props,
+    ref,
+  });
+
+  return (
+    <Component {...getLinkProps()}>
+      <>
+        {children}
+        {showAnchorIcon && anchorIcon}
+      </>
+    </Component>
+  );
+});
+
+MyLink.displayName = "MyLink";
+
+export default MyLink;

apps/docs/content/components/link/custom-impl.raw.tsx

@@ -0,0 +1,32 @@
+import React, {forwardRef} from "react";
+import {LinkIcon} from "@nextui-org/shared-icons";
+import {linkAnchorClasses} from "@nextui-org/theme";
+import {LinkProps, useLink} from "@nextui-org/react";
+
+export interface MyLinkProps extends LinkProps {}
+
+const MyLink = forwardRef<HTMLAnchorElement, MyLinkProps>((props, ref) => {
+  const {
+    Component,
+    children,
+    showAnchorIcon,
+    anchorIcon = <LinkIcon className={linkAnchorClasses} />,
+    getLinkProps,
+  } = useLink({
+    ...props,
+    ref,
+  });
+
+  return (
+    <Component {...getLinkProps()}>
+      <>
+        {children}
+        {showAnchorIcon && anchorIcon}
+      </>
+    </Component>
+  );
+});
+
+MyLink.displayName = "MyLink";
+
+export default MyLink;

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

@@ -1,68 +1,5 @@
-const App = `import {forwardRef} from "react";
-import {LinkIcon} from "@nextui-org/shared-icons";
-import {linkAnchorClasses} from "@nextui-org/theme";
-
-import {useLink} from "@nextui-org/react";
-
-const MyLink = forwardRef((props, ref) => {
-  const {
-    Component,
-    children,
-    showAnchorIcon,
-    anchorIcon = <LinkIcon className={linkAnchorClasses} />,
-    getLinkProps,
-  } = useLink({
-    ...props,
-    ref,
-  });
-
-  return (
-    <Component {...getLinkProps()}>
-      <>
-        {children}
-        {showAnchorIcon && anchorIcon}
-      </>
-    </Component>
-  );
-});
-
-MyLink.displayName = "MyLink";
-
-export default MyLink;`;
-
-const AppTs = `import {forwardRef} from "react";
-import {LinkIcon} from "@nextui-org/shared-icons";
-import {linkAnchorClasses} from "@nextui-org/theme";
-
-import {LinkProps, useLink} from "@nextui-org/react";
-
-export interface MyLinkProps extends LinkProps {}
-
-const MyLink = forwardRef<HTMLAnchorElement, MyLinkProps>((props, ref) => {
-  const {
-    Component,
-    children,
-    showAnchorIcon,
-    anchorIcon = <LinkIcon className={linkAnchorClasses} />,
-    getLinkProps,
-  } = useLink({
-    ...props,
-    ref,
-  });
-
-  return (
-    <Component {...getLinkProps()}>
-      <>
-        {children}
-        {showAnchorIcon && anchorIcon}
-      </>
-    </Component>
-  );
-});
-
-MyLink.displayName = "MyLink";
-
-export default MyLink;`;
+import App from "./custom-impl.raw.jsx?raw";
+import AppTs from "./custom-impl.raw.tsx?raw";
 
 const react = {
   "/App.jsx": App,

apps/docs/content/components/link/disabled.raw.jsx

@@ -0,0 +1,9 @@
+import {Link} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <Link isDisabled href="#">
+      Disabled Link
+    </Link>
+  );
+}

apps/docs/content/components/link/disabled.ts

@@ -1,10 +1,4 @@
-const App = `import {Link} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <Link href="#" isDisabled>Disabled Link</Link>
-  );
-}`;
+import App from "./disabled.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,

apps/docs/content/components/link/external.raw.jsx

@@ -0,0 +1,14 @@
+import {Link} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <div className="flex gap-4">
+      <Link isExternal href="https://github.com/nextui-org/nextui">
+        External Link
+      </Link>
+      <Link isExternal showAnchorIcon href="https://github.com/nextui-org/nextui">
+        External Link Anchor
+      </Link>
+    </div>
+  );
+}

apps/docs/content/components/link/external.ts

@@ -1,21 +1,4 @@
-const App = `import {Link} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <div className="flex gap-4">
-      <Link isExternal href="https://github.com/nextui-org/nextui">
-        External Link
-      </Link>
-      <Link
-        isExternal
-        href="https://github.com/nextui-org/nextui"
-        showAnchorIcon
-      >
-        External Link Anchor
-      </Link>
-    </div>
-  );
-}`;
+import App from "./external.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,

apps/docs/content/components/link/nextjs.raw.jsx

@@ -0,0 +1,10 @@
+import {Link} from "@nextui-org/react";
+import NextLink from "next/link";
+
+export default function App() {
+  return (
+    <Link as={NextLink} href="/route">
+      Next.js Link
+    </Link>
+  );
+}