Add playground page

mockoon · Dec 19, 2023 · 7106ea4 · 7106ea4
1 parent 1fdd9a0
commit 7106ea4
Show file tree

Hide file tree

Showing 8 changed files with 669 additions and 115 deletions.
diff --git a/components/accordion.tsx b/components/accordion.tsx
@@ -58,17 +58,21 @@ const Accordion: FunctionComponent<{
                 <span
                   className='me-4'
                   id={`accordionContent${dataGroupIndex}${dataItemIndex}`}
-                >
-                  {dataItem.title}
-                </span>
+                  dangerouslySetInnerHTML={{ __html: dataItem.title }}
+                ></span>
 
                 <div className='ms-auto'>
-                  {Array.isArray(dataItem.text) && (
+                  {(Array.isArray(dataItem.content) ||
+                    dataItem.count !== undefined) && (
                     <span className='badge text-bg-gray-200 rounded-pill'>
-                      {dataItem.text.length}{' '}
-                      {dataItem.text.length > 1
-                        ? counterSuffix.plural
-                        : counterSuffix.singular}
+                      {Array.isArray(dataItem.content)
+                        ? dataItem.content.length
+                        : dataItem.count}{' '}
+                      {(Array.isArray(dataItem.content)
+                        ? dataItem.content.length
+                        : dataItem.count) > 1
+                        ? counterSuffix?.plural
+                        : counterSuffix?.singular}
                     </span>
                   )}
                 </div>
@@ -78,13 +82,12 @@ const Accordion: FunctionComponent<{
                 className={`accordion-collapse ${
                   accordionItemState ? '' : 'collapse'
                 }`}
-                id='helpOne'
                 aria-labelledby={`accordionContent${dataGroupIndex}${dataItemIndex}`}
                 data-bs-parent={`#accordion${dataGroupIndex}${dataItemIndex}`}
               >
-                {Array.isArray(dataItem.text) && (
+                {Array.isArray(dataItem.content) && (
                   <ol className='accordion-body text-gray-700 list-group-numbered'>
-                    {dataItem.text.map((textItem, textItemIndex) => {
+                    {dataItem.content.map((textItem, textItemIndex) => {
                       return (
                         <li
                           key={`dataGroup${dataGroupIndex}dataItem${dataItemIndex}textItem${textItemIndex}`}
@@ -95,12 +98,16 @@ const Accordion: FunctionComponent<{
                     })}
                   </ol>
                 )}
-                {!Array.isArray(dataItem.text) && (
-                  <div
-                    className='accordion-body text-gray-700'
-                    dangerouslySetInnerHTML={{ __html: dataItem.text }}
-                  ></div>
-                )}
+                {!Array.isArray(dataItem.content) &&
+                  typeof dataItem.content === 'string' && (
+                    <div
+                      className='accordion-body text-gray-700'
+                      dangerouslySetInnerHTML={{ __html: dataItem.content }}
+                    ></div>
+                  )}
+                {!Array.isArray(dataItem.content) &&
+                  typeof dataItem.content !== 'string' &&
+                  dataItem.content}
               </div>
             </div>
           );

diff --git a/components/footer.tsx b/components/footer.tsx
@@ -188,11 +188,11 @@ const Footer: FunctionComponent<{
               </li>
               <li className='mb-2'>
                 <Link href='/status/' className='text-reset'>
-                  Status
+                  Services status
                 </Link>
               </li>
             </ul>
-            <h6 className='fw-bold text-uppercase text-gray-700'>Tools</h6>
+            <h6 className='fw-bold text-uppercase text-gray-700'>Apps</h6>
 
             <ul className='list-unstyled text-gray-700'>
               <li className='mb-2'>