feat: use separated file for examples

packages/react/src/docs/components/Button.mdx

@@ -1,7 +1,9 @@
 import { Button } from "@components/Button";
 import { TabProvider, TabTrigger, TabContent, TabList } from "@components/Tabs";
 import { Story } from "@/components/Story";
-import { LoadedCode } from "@/components/LoadedCode";
+import { LoadedCode, GITHUB } from "@/components/LoadedCode";
+import { ButtonDemo } from "./ButtonBlocks/Preview";
+import Examples from "./ButtonBlocks/Examples";
 
 # Button
 Displays a button or a component that looks like a button.
@@ -13,17 +15,11 @@ Displays a button or a component that looks like a button.
     </TabList>
     <TabContent name="preview">
         <Story layout="centered">
-            <Button>Button</Button>
+            <ButtonDemo />
         </Story>
     </TabContent>
     <TabContent name="code">
-        ```tsx
+        <LoadedCode from={`${GITHUB}/packages/react/src/docs/components/ButtonBlocks/Preview.tsx`} />
-        import { Button } from "@components/Button";
-
-        export function ButtonDemo() {
-            return <Button>Button</Button>
-        }
-        ```
     </TabContent>
 </TabProvider>
 
@@ -32,7 +28,7 @@ Displays a button or a component that looks like a button.
 1. Create a new file `Button.tsx` in your component folder.
 2. Copy and paste the following code into the file.
 
-<LoadedCode from="https://raw.githubusercontent.com/p-sw/ui/main/packages/react/components/Button.tsx" />
+<LoadedCode from={`${GITHUB}/packages/react/components/Button.tsx`} />
 
 ## Usage
 
@@ -73,17 +69,11 @@ import { Button } from "@components/Button";
     </TabList>
     <TabContent name="preview">
         <Story layout="centered">
-            <Button>Button</Button>
+            <Examples.Default />
         </Story>
     </TabContent>
     <TabContent name="code">
-```tsx
+        <LoadedCode from={`${GITHUB}/packages/react/src/docs/components/ButtonBlocks/Examples/Default.tsx`} />
-import { Button } from "@components/Button";
-
-export function ButtonDemo() {
-    return <Button preset="default">Button</Button>
-}
-```
     </TabContent>
 </TabProvider>
 
@@ -96,17 +86,11 @@ export function ButtonDemo() {
     </TabList>
     <TabContent name="preview">
         <Story layout="centered">
-            <Button preset="ghost">Button</Button>
+            <Examples.Ghost />
         </Story>
     </TabContent>
     <TabContent name="code">
-```tsx
+        <LoadedCode from={`${GITHUB}/packages/react/src/docs/components/ButtonBlocks/Examples/Ghost.tsx`} />
-import { Button } from "@components/Button";
-
-export function ButtonDemo() {
-    return <Button preset="ghost">Button</Button>
-}
-```
     </TabContent>
 </TabProvider>
 
@@ -119,17 +103,11 @@ export function ButtonDemo() {
     </TabList>
     <TabContent name="preview">
         <Story layout="centered">
-            <Button preset="link">Button</Button>
+            <Examples.Link />
         </Story>
     </TabContent>
     <TabContent name="code">
-```tsx
+        <LoadedCode from={`${GITHUB}/packages/react/src/docs/components/ButtonBlocks/Examples/Link.tsx`} />
-import { Button } from "@components/Button";
-
-export function ButtonDemo() {
-    return <Button preset="link">Button</Button>
-}
-```
     </TabContent>
 </TabProvider>
 
@@ -142,17 +120,11 @@ export function ButtonDemo() {
     </TabList>
     <TabContent name="preview">
         <Story layout="centered">
-            <Button preset="success">Button</Button>
+            <Examples.Success />
         </Story>
     </TabContent>
     <TabContent name="code">
-```tsx
+        <LoadedCode from={`${GITHUB}/packages/react/src/docs/components/ButtonBlocks/Examples/Success.tsx`} />
-import { Button } from "@components/Button";
-
-export function ButtonDemo() {
-    return <Button preset="success">Button</Button>
-}
-```
     </TabContent>
 </TabProvider>
 
@@ -165,17 +137,11 @@ export function ButtonDemo() {
     </TabList>
     <TabContent name="preview">
         <Story layout="centered">
-            <Button preset="warning">Button</Button>
+            <Examples.Warning />
         </Story>
     </TabContent>
     <TabContent name="code">
-```tsx
+        <LoadedCode from={`${GITHUB}/packages/react/src/docs/components/ButtonBlocks/Examples/Warning.tsx`} />
-import { Button } from "@components/Button";
-
-export function ButtonDemo() {
-    return <Button preset="warning">Button</Button>
-}
-```
     </TabContent>
 </TabProvider>
 
@@ -188,16 +154,10 @@ export function ButtonDemo() {
     </TabList>
     <TabContent name="preview">
         <Story layout="centered">
-            <Button preset="danger">Button</Button>
+            <Examples.Danger />
         </Story>
     </TabContent>
     <TabContent name="code">
-```tsx
+        <LoadedCode from={`${GITHUB}/packages/react/src/docs/components/ButtonBlocks/Examples/Danger.tsx`} />
-import { Button } from "@components/Button";
-
-export function ButtonDemo() {
-    return <Button preset="danger">Button</Button>
-}
-```
     </TabContent>
 </TabProvider>

packages/react/src/docs/components/ButtonBlocks/Examples/Danger.tsx

@@ -0,0 +1,5 @@
+import { Button } from "@components/Button";
+
+export const Danger = () => {
+  return <Button preset="danger">Danger</Button>;
+};

packages/react/src/docs/components/ButtonBlocks/Examples/Default.tsx

@@ -0,0 +1,5 @@
+import { Button } from "@components/Button";
+
+export const Default = () => {
+  return <Button preset="default">Default</Button>;
+};

packages/react/src/docs/components/ButtonBlocks/Examples/Ghost.tsx

@@ -0,0 +1,5 @@
+import { Button } from "@components/Button";
+
+export const Ghost = () => {
+  return <Button preset="ghost">Ghost</Button>;
+};

packages/react/src/docs/components/ButtonBlocks/Examples/Link.tsx

@@ -0,0 +1,5 @@
+import { Button } from "@components/Button";
+
+export const Link = () => {
+  return <Button preset="link">Link</Button>;
+};

packages/react/src/docs/components/ButtonBlocks/Examples/Success.tsx

@@ -0,0 +1,5 @@
+import { Button } from "@components/Button";
+
+export const Success = () => {
+  return <Button preset="success">Success</Button>;
+};

packages/react/src/docs/components/ButtonBlocks/Examples/Warning.tsx

@@ -0,0 +1,5 @@
+import { Button } from "@components/Button";
+
+export const Warning = () => {
+  return <Button preset="warning">Warning</Button>;
+};

packages/react/src/docs/components/ButtonBlocks/Examples/index.ts

@@ -0,0 +1,16 @@
+import { Danger } from "./Danger";
+import { Warning } from "./Warning";
+import { Success } from "./Success";
+import { Link } from "./Link";
+import { Ghost } from "./Ghost";
+import { Default } from "./Default";
+
+export default {
+  Danger,
+  Warning,
+  Success,
+  Link,
+  Ghost,
+  Default,
+};
+

packages/react/src/docs/components/ButtonBlocks/Preview.tsx

@@ -0,0 +1,5 @@
+import { Button } from "@components/Button";
+
+export function ButtonDemo() {
+  return <Button>Button</Button>;
+}