css added

Author: faisal004

src/components/CBBaseInfo.jsx

@@ -1,38 +1,34 @@
 /**
  * This is a custom Front Matter Component that takes the front matter and renders the api data
  */
-import React from 'react';
-import useFrontMatter from './useFrontMatter';
+import React from "react";
+import useFrontMatter from "./useFrontMatter";
 
 const CBBaseInfo = () => {
   const frontMatter = useFrontMatter();
-  console.log(frontMatter)
+  console.log(frontMatter);
   return (
-  <div>
-    {Object.entries(frontMatter).map(([key, value]) => {
-      if (key === 'cbbaseinfo') {
-        console.log(`Key: ${key}, Value: ${value}`);
-        
-        return (
-          <p key={key}>
-            Description: {value.description}
-          </p>
-        );
-        // return Object.entries(value).map(([cbkey, cbvalue]) => {
-        //   console.log(cbkey);
-        //   return (
-        //     <p key={cbkey}>
-        //       <strong>{cbkey}</strong>
-        //       <br/>
-        //     </p>
-        //   );
-        // });
-      }
-      
-      return null;
-    })}
-  </div>
-);
-  };
+    <div>
+      {Object.entries(frontMatter).map(([key, value]) => {
+        if (key === "cbbaseinfo") {
+          console.log(`Key: ${key}, Value: ${value}`);
 
-export default CBBaseInfo;
+          return <div className="description" key={key}>Description: {value.description}</div>;
+          // return Object.entries(value).map(([cbkey, cbvalue]) => {
+          //   console.log(cbkey);
+          //   return (
+          //     <p key={cbkey}>
+          //       <strong>{cbkey}</strong>
+          //       <br/>
+          //     </p>
+          //   );
+          // });
+        }
+
+        return null;
+      })}
+    </div>
+  );
+};
+
+export default CBBaseInfo;

src/components/CBParameters.jsx

@@ -1,31 +1,68 @@
-/**
- * This is a custom Front Matter Component that takes the front matter and renders the api data
- */
-import React from 'react';
-import useFrontMatter from './useFrontMatter';
+import React from "react";
+import useFrontMatter from "./useFrontMatter";
 
 const CBParameters = () => {
   const frontMatter = useFrontMatter();
+
   return (
-  <div>
-    {Object.entries(frontMatter).map(([key, value]) => {
-      if (key === 'cbparameters') {  
-        if (value.parameters) {
-          return value.parameters.map((param, index) => {
-            console.log("Parameter"+param);
-            return (
-              <p key={index}>
-                <strong>{param}</strong>
-                <br/>
-              </p>
-            );
-          });
+    <div>
+      {Object.entries(frontMatter).map(([key, value]) => {
+        if (key === "cbparameters") {
+          const hasParameters = value.parameters && value.parameters.length > 0;
+          const hasReturns = value.returns && value.returns.signatureTypeName && value.returns.description;
+
+          return (
+            <div>
+              {hasParameters && (
+                <div>
+                  <h3>Parameters</h3>
+                  <table className="table" >
+                    <thead>
+                      <tr>
+                        <th>Name</th>
+                        <th>Type</th>
+                        <th>Description</th>
+                      </tr>
+                    </thead>
+                    <tbody>
+                      {value.parameters.map((param, index) => (
+                        <tr key={index}>
+                          <td>{param.name}</td>
+                          <td>{param.typeName}</td>
+                          <td>{param.description}</td>
+                        </tr>
+                      ))}
+                    </tbody>
+                  </table>
+                </div>
+              )}
+
+              {hasReturns && (
+                <div>
+                  <h3>Returns</h3>
+                  <table className="table" >
+                    <thead>
+                      <tr>
+                        <th>Type</th>
+                        <th>Description</th>
+                      </tr>
+                    </thead>
+                    <tbody>
+                      <tr>
+                        <td>{value.returns.signatureTypeName}</td>
+                        <td>{value.returns.description}</td>
+                      </tr>
+                    </tbody>
+                  </table>
+                </div>
+              )}
+            </div>
+          );
         }
-      }
-      return null;
-    })}
-  </div>
-);
-  };
+        return null;
+      })}
+    </div>
+  );
+};
 
-export default CBParameters;
+export default CBParameters;

src/css/custom.css

@@ -32,12 +32,31 @@
 [data-theme="dark"] .navbar {
   background-color: rgba(34, 31, 29, 0.9);
 }
+
 .navbar {
   background-color: rgba(255, 255, 255, 0.9);
 }
 
+.table {
+  width: 100%;
+  margin-bottom: 20px;
+}
+
+.description{
+  margin-bottom: 20px;
+  background-color: rgb(236, 234, 234);
+  border: 2px solid #d8d4d4;
+  color: black;
+  width: fit-content;
+  padding: 20px;
+  border-radius: 5px;
+}
+[data-theme='dark'] .description{
+  color: white;
+  background-color: rgb(57, 56, 56);
+  border: 2px solid #545050;
+}
 [data-theme='dark'] .footer {
   background-color: rgba(34, 31, 29, 0.9);
-  
-}
 
+}