chore(external docs): render array of object type in component docs (#…

…22138)

* Try to render array of object in component docs

* Add some margin between rendering config-object in array block

* Add some margin on top of config object and decrease the margin in array example

* Remove array's `syntax` rendering since it's not defined in schema

* conditional render syntax field for array type

website/layouts/partials/data.html

@@ -131,10 +131,18 @@
 
           <span class="flex items-center space-x-1">
             {{ partial "badge.html" (dict "word" $k "color" "gray") }}
+            {{ if $v.syntax }} 
             {{ partial "badge.html" (dict "word" $v.syntax "color" "gray") }}
+            {{ end }}
           </span>
         </span>
 
+        {{ if eq $k "object" }}
+        <div class="mt-2">
+            {{ template "config-object" (dict "name" $name "config" $v "level" 4) }}
+        </div>
+        {{ end }}
+
         {{ with $v.examples }}
         {{ template "config-array-examples" (dict "examples" .) }}
         {{ end }}
@@ -1630,7 +1638,7 @@ <h3 id="{{ $code }}">
 
 {{ define "config-array-examples" }}
 {{ $json := .examples | jsonify (dict "indent" "  ") }}
-<div x-data="{ open: false }" class="mt-2.5 border rounded py-2 px-3 dark:border-gray-700">
+<div x-data="{ open: false }" class="mt-2 border rounded py-2 px-3 dark:border-gray-700">
   <span class="flex justify-between items-center">
     <span class="text-sm">
       Examples