Add json formatter tool

mockoon · May 7, 2024 · 9be6b01 · 9be6b01
1 parent 4cbbf04
commit 9be6b01
Show file tree

Hide file tree

Showing 5 changed files with 420 additions and 24 deletions.
diff --git a/components/card.tsx b/components/card.tsx
@@ -9,6 +9,8 @@ const Card: FunctionComponent<{
   cover?: boolean;
   border?: boolean;
   borderColor?: string;
+  backgroundColor?: string;
+  btnLight?: boolean;
   // synchronize colors between border and link
   synchronizedColors?: boolean;
 }> = function (props) {
@@ -26,7 +28,10 @@ const Card: FunctionComponent<{
         className={`card ${border ? 'card-border' : ''} d-flex ${
           props.vertical ? 'flex-column' : 'flex-column flex-lg-row'
         } flex-fill shadow-light-lg text-center h-100`}
-        style={{ borderTopColor: props.borderColor }}
+        style={{
+          borderTopColor: props.borderColor,
+          backgroundColor: props.backgroundColor
+        }}
       >
         {props.data.imageSrc && (
           <div
@@ -83,7 +88,9 @@ const Card: FunctionComponent<{
                   <Link
                     key={`link${linkIndex}`}
                     href={link.src}
-                    className={`btn-xs btn btn-primary-subtle d-flex align-items-center ${
+                    className={`btn-xs btn ${
+                      props.btnLight ? 'btn-light' : 'btn-primary-subtle'
+                    } d-flex align-items-center ${
                       props.data.links?.length > 1 ? '' : 'mt-auto'
                     }`}
                     style={{
@@ -106,7 +113,9 @@ const Card: FunctionComponent<{
                 ) : (
                   <a
                     key={`link${linkIndex}`}
-                    className={`btn-xs btn btn-primary-subtle d-flex align-items-center ${
+                    className={`btn-xs btn ${
+                      props.btnLight ? 'btn-light' : 'btn-primary-subtle'
+                    } d-flex align-items-center ${
                       props.data.links?.length > 1 ? '' : 'mt-auto'
                     }`}
                     href={link.src}

diff --git a/pages/brand.tsx b/pages/brand.tsx
@@ -24,30 +24,20 @@ const Brand: FunctionComponent = function () {
             <div className='col-12 col-md-6 col-lg-4'>
               <Card
                 data={{
-                  title: 'Mockoon eyes logo for light or dark backgrounds',
+                  title: 'Mockoon eyes logo for light backgrounds',
                   imageSrc: '/images/logo-eyes.svg',
                   imageAlt: 'Mockoon eyes logo',
                   imagePaddingClasses: 'py-8',
                   links: [
                     {
                       // keep URL absolute to go through Cloudflare rules and trigger download
                       src: 'https://mockoon.com/images/logo-eyes.svg?download=true',
-                      text: 'SVG (light)'
-                    },
-                    {
-                      // keep URL absolute to go through Cloudflare rules and trigger download
-                      src: 'https://mockoon.com/images/logo-eyes-sticker.svg?download=true',
-                      text: 'SVG (dark)'
+                      text: 'SVG'
                     },
                     {
                       // keep URL absolute to go through Cloudflare rules and trigger download
                       src: 'https://mockoon.com/images/logo-eyes.png?download=true',
-                      text: 'PNG (light)'
-                    },
-                    {
-                      // keep URL absolute to go through Cloudflare rules and trigger download
-                      src: 'https://mockoon.com/images/logo-eyes-sticker.png?download=true',
-                      text: 'PNG (dark)'
+                      text: 'PNG'
                     }
                   ]
                 }}
@@ -60,36 +50,83 @@ const Brand: FunctionComponent = function () {
             <div className='col-12 col-md-6 col-lg-4'>
               <Card
                 data={{
-                  title: 'Mockoon full logo for light or dark backgrounds',
+                  title: 'Mockoon full logo for light backgrounds',
                   imageSrc: '/images/logo.svg',
                   imageAlt: 'Mockoon full logo',
                   links: [
                     {
                       // keep URL absolute to go through Cloudflare rules and trigger download
                       src: 'https://mockoon.com/images/logo-text.svg?download=true',
-                      text: 'SVG (light)'
+                      text: 'SVG'
                     },
                     {
                       // keep URL absolute to go through Cloudflare rules and trigger download
-                      src: 'https://mockoon.com/images/logo-text-sticker.svg?download=true',
-                      text: 'SVG (dark)'
+                      src: 'https://mockoon.com/images/logo-text.png?download=true',
+                      text: 'PNG'
+                    }
+                  ]
+                }}
+                vertical
+                cover={false}
+                border={true}
+                borderColor={'var(--bs-body-color)'}
+              />
+            </div>
+          </div>
+          <div className='row justify-content-center mt-8'>
+            <div className='col-12 col-md-6 col-lg-4'>
+              <Card
+                data={{
+                  title: 'Mockoon eyes logo for dark backgrounds',
+                  imageSrc: '/images/logo-eyes-sticker.svg',
+                  imageAlt: 'Mockoon eyes logo',
+                  imagePaddingClasses: 'py-8',
+                  links: [
+                    {
+                      // keep URL absolute to go through Cloudflare rules and trigger download
+                      src: 'https://mockoon.com/images/logo-eyes-sticker.svg?download=true',
+                      text: 'SVG'
                     },
                     {
                       // keep URL absolute to go through Cloudflare rules and trigger download
-                      src: 'https://mockoon.com/images/logo-text.png?download=true',
-                      text: 'PNG (light)'
+                      src: 'https://mockoon.com/images/logo-eyes-sticker.png?download=true',
+                      text: 'PNG'
+                    }
+                  ]
+                }}
+                vertical
+                cover={false}
+                border={true}
+                borderColor='var(--bs-body-color)'
+                backgroundColor='var(--bs-gray-400)'
+                btnLight
+              />
+            </div>
+            <div className='col-12 col-md-6 col-lg-4'>
+              <Card
+                data={{
+                  title: 'Mockoon full logo for dark backgrounds',
+                  imageSrc: '/images/logo-text-sticker.svg',
+                  imageAlt: 'Mockoon full logo',
+                  links: [
+                    {
+                      // keep URL absolute to go through Cloudflare rules and trigger download
+                      src: 'https://mockoon.com/images/logo-text-sticker.svg?download=true',
+                      text: 'SVG'
                     },
                     {
                       // keep URL absolute to go through Cloudflare rules and trigger download
                       src: 'https://mockoon.com/images/logo-text-sticker.png?download=true',
-                      text: 'PNG (dark)'
+                      text: 'PNG'
                     }
                   ]
                 }}
                 vertical
                 cover={false}
                 border={true}
-                borderColor={'var(--bs-body-color)'}
+                borderColor='var(--bs-body-color)'
+                backgroundColor='var(--bs-gray-400)'
+                btnLight
               />
             </div>
           </div>

diff --git a/pages/tools/index.tsx b/pages/tools/index.tsx
@@ -84,6 +84,17 @@ const tools = [
       }
     ],
     imageSrc: '/images/illustrations/http-headers-analyzer.svg'
+  },
+  {
+    title: 'Online JSON beautifier and formatter',
+    description: 'Format and beautify your JSON data online',
+    links: [
+      {
+        src: '/tools/json-formatter-beautifier/',
+        text: 'Format JSON'
+      }
+    ],
+    imageSrc: '/images/illustrations/json-formatter-beautifier.svg'
   }
 ];