feat: Update ConstantReference to use CodeDef

src/components/ConstantReference.js

@@ -1,29 +1,33 @@
 import React from 'react';
 import Markdown from 'react-markdown';
 import PropTypes from 'prop-types';
+import CodeDef from './CodeDef';
 import styles from './ConstantReference.module.scss';
 
 const ConstantReference = ({ constant }) => {
   const { name, values, type } = constant;
+
   return (
-    <div className={styles.container}>
-      <div className={styles.name}>{name}</div>
-      <div>{type === 'array' ? '[' : '{'}</div>
-      <div className={styles.constantContainer}>
+    <CodeDef className={styles.container}>
+      <h3 className={styles.name}>
+        <code>{name}</code>
+      </h3>
+      <CodeDef.Bracket>{type === 'array' ? '[' : '{'}</CodeDef.Bracket>
+      <CodeDef.Block>
         {values.map((value, i) => (
           <Markdown key={i} source={value} />
         ))}
-      </div>
-      <div>{type === 'array' ? ']' : '}'}</div>
-    </div>
+      </CodeDef.Block>
+      <CodeDef.Bracket>{type === 'array' ? ']' : '}'}</CodeDef.Bracket>
+    </CodeDef>
   );
 };
 
 ConstantReference.propTypes = {
   constant: PropTypes.shape({
     type: PropTypes.string,
     name: PropTypes.string,
-    values: PropTypes.array,
+    values: PropTypes.any,
   }),
 };
 

src/components/ConstantReference.module.scss

@@ -1,22 +1,18 @@
 .container {
-  color: var(--color-neutrals-500);
-  font-family: var(--code-font);
   font-size: 0.875rem;
-  line-height: 1.5;
-  margin-top: 2rem;
+
+  &:not(:last-child) {
+    margin-bottom: 2rem;
+  }
 }
 
 .name {
   font-size: 1rem;
-  font-family: var(--primary-font-family);
-  color: var(--color-neutrals-800);
+  font-weight: normal;
   margin-bottom: 0.5rem;
 }
 
 .block {
   margin-left: 0.5rem;
 }
 
-.constantContainer {
-  margin: 0 0 1rem 1.5rem;
-}