Move fields into components

Author: handotdev

content/components/fields.mdx

@@ -0,0 +1,119 @@
+---
+title: "Fields"
+description: "Set parameters for your API or SDK references"
+icon: 'letter-text'
+---
+
+There are two types of fields: Paramameter Fields and Response Fields.
+
+## Paramameter Field
+
+A `ParamField` component is used to define the parameters for your APIs or SDKs. Adding a `ParamField` will automatically add an [API Playground](/api-playground/overview).
+
+<ParamField path="param" type="string" required>
+  An example of a parameter field
+</ParamField>
+
+<RequestExample>
+
+```jsx Path Example
+<ParamField path="param" type="string">
+  An example of a parameter field
+</ParamField>
+```
+
+```jsx Body Example
+<ParamField body="user_age" type="integer" default="0" required>
+  The age of the user. Cannot be less than 0
+</ParamField>
+```
+
+```jsx Response Example
+<ResponseField name="response" type="string" required>
+  A response field example
+</ResponseField>
+```
+
+</RequestExample>
+
+### Props
+
+<ParamField body="query, path, body, or header" type="string">
+  Whether it is a query, path, body, or header parameter followed by the name
+</ParamField>
+
+<ParamField body="type" type="string">
+  Expected type of the parameter's value
+  
+  Supports `number`, `string`, `bool`, `object`.
+
+  Arrays can be defined using the `[]` suffix. For example `string[]`.
+</ParamField>
+
+<ParamField body="required" type="boolean">
+  Indicate whether the parameter is required
+</ParamField>
+
+<ParamField body="deprecated" type="boolean">
+  Indicate whether the parameter is deprecated
+</ParamField>
+
+<ParamField body="default" type="string">
+  Default value used by the server if the request does not provide a value
+</ParamField>
+
+<ParamField body="initialValue" type="any">
+  Value that will be used to initialize the playground
+</ParamField>
+
+<ParamField body="placeholder" type="string">
+  Placeholder text for the input in the playground
+</ParamField>
+
+<ParamField body="children" type="string">
+  Description of the parameter (markdown enabled)
+</ParamField>
+
+## Response Field
+
+The `<ResponseField>` component is designed to define the return values of an API. Many docs also use `<ResponseField>` on pages when you need to list the types of something.
+
+<ResponseField name="response" type="string" required>
+  A response field example
+</ResponseField>
+
+```jsx
+<ResponseField name="response" type="string" required>
+  A response field example
+</ResponseField>
+```
+
+### 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 - this can be any arbitrary string.
+</ResponseField>
+
+<ResponseField name="default" type="string">
+  The default value.
+</ResponseField>
+
+<ResponseField name="required" type="boolean">
+  Show "required" beside the field name.
+</ResponseField>
+
+<ResponseField name="deprecated" type="boolean">
+  Whether a field is deprecated or not.
+</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/params.mdx

@@ -239,6 +239,7 @@
               "content/components/card-groups",
               "content/components/code",
               "content/components/code-groups",
+              "content/components/fields",
               "content/components/frames",
               "content/components/icons",
               "content/components/mermaid-diagrams",
@@ -251,8 +252,6 @@
           {
             "group": "API Components",
             "pages": [
-              "content/components/params",
-              "content/components/responses",
               "content/components/expandables",
               "content/components/sticky-examples"
             ]