add response fields and move reusable snippets components to components section

Author: lawreka

content/components/custom-components.mdx

@@ -10,24 +10,20 @@ The `<ResponseField>` component is designed to define the return values of an AP
   A response field example
 </ResponseField>
 
-<RequestExample>
-
-```jsx ResponseField Example
+```jsx
 <ResponseField name="response" type="string" required>
   A response field example
 </ResponseField>
 ```
 
-</RequestExample>
-
 ## Props
 
 <ResponseField name="name" type="string" required>
   The name of the response value.
 </ResponseField>
 
 <ResponseField name="type" type="string" required>
-  Expected type of the response value
+  Expected type of the response value, you can also pass a custom type string
 </ResponseField>
 
 <ResponseField name="default" type="string">
@@ -37,3 +33,15 @@ The `<ResponseField>` component is designed to define the return values of an AP
 <ResponseField name="required" type="boolean">
   Show "required" beside the field name.
 </ResponseField>
+
+<ResponseField name="deprecated" type="boolean">
+  Show "deprecated" beside the field name.
+</ResponseField>
+
+<ResponseField name="pre" type="string[]">
+  Labels that are shown before the name of the field
+</ResponseField>
+
+<ResponseField name="post" type="string[]">
+  Labels that are shown after the name of the field
+</ResponseField>

content/components/responses.mdx

@@ -0,0 +1,65 @@
+---
+title: "Reusable Components"
+description: "Reusable, custom component snippets"
+icon: "recycle"
+---
+
+Much like custom content [snippets](/reusable-snippets) that can be added in MDX files, you can add reusable components as snippets.
+
+## Creating a reusable React component
+
+1. Inside your snippet file, create a component that takes in props by exporting your component in the form of an arrow function.
+
+```typescript snippets/custom-component.mdx
+export const MyComponent = ({ title }) => (
+  <div>
+    <h1>{title}</h1>
+    <p>... snippet content ...</p>
+  </div>
+);
+```
+
+<Warning>
+  MDX does not compile inside the body of an arrow function. Stick to HTML
+  syntax when you can or use a default export if you need to use MDX inside of your component.
+</Warning>
+
+2. Import the snippet into your destination file and pass in the props
+
+```typescript destination-file.mdx
+---
+title: My title
+description: My Description
+---
+
+import { MyComponent } from '/snippets/custom-component.mdx';
+
+Lorem ipsum dolor sit amet.
+
+<MyComponent title={'Custom title'} />
+```
+
+
+## Client-Side Content
+
+By default, Mintlify employs server-side rendering, generating content
+at build time. For client-side content loading, ensure to verify the
+`document` object's availability before initiating the rendering process.
+
+```typescript snippets/client-component.mdx
+{/* `setTimeout` simulates a React.useEffect, which is called after the component is mounted. */}
+export const ClientComponent = () => {
+  if (typeof document === "undefined") {
+    return null;
+  } else {
+    setTimeout(() => {
+      const clientComponent = document.getElementById("client-component");
+      if (clientComponent) {
+        clientComponent.innerHTML = "Hello, client-side component!";
+      }
+    }, 1);
+
+    return <div id="client-component"></div>
+  }
+}
+```

content/components/reusable-components.mdx

@@ -205,7 +205,7 @@
           {
             "group": "Custom Components",
             "pages": [
-              "content/components/custom-components"
+              "content/components/reusable-components"
             ]
           },
           {

docs.json

@@ -28,7 +28,6 @@ should create a custom snippet to keep your content in sync.
 Hello world! This is my content I want to reuse across pages. 
 ```
 
-
 2. Import the snippet into your destination file.
 
 ```typescript destination-file.mdx
@@ -96,61 +95,3 @@ import { myName, myObject } from '/snippets/path/to/custom-variables.mdx';
 
 Hello, my name is {myName} and I like {myObject.fruit}.
 ```
-
-### Reusable components
-
-1. Inside your snippet file, create a component that takes in props by exporting
-   your component in the form of an arrow function.
-
-```typescript snippets/custom-component.mdx
-export const MyComponent = ({ title }) => (
-  <div>
-    <h1>{title}</h1>
-    <p>... snippet content ...</p>
-  </div>
-);
-```
-
-<Warning>
-  MDX does not compile inside the body of an arrow function. Stick to HTML
-  syntax when you can or use a default export if you need to use MDX.
-</Warning>
-
-2. Import the snippet into your destination file and pass in the props
-
-```typescript destination-file.mdx
----
-title: My title
-description: My Description
----
-
-import { MyComponent } from '/snippets/custom-component.mdx';
-
-Lorem ipsum dolor sit amet.
-
-<MyComponent title={'Custom title'} />
-```
-
-### Client-Side Content
-
-By default, Mintlify employs server-side rendering, generating content
-at build time. For client-side content loading, ensure to verify the
-`document` object's availability before initiating the rendering process.
-
-```typescript snippets/client-component.mdx
-{/* `setTimeout` simulates a React.useEffect, which is called after the component is mounted. */}
-export const ClientComponent = () => {
-  if (typeof document === "undefined") {
-    return null;
-  } else {
-    setTimeout(() => {
-      const clientComponent = document.getElementById("client-component");
-      if (clientComponent) {
-        clientComponent.innerHTML = "Hello, client-side component!";
-      }
-    }, 1);
-
-    return <div id="client-component"></div>
-  }
-}
-```