feat: Add number and string components for code def

src/components/CodeDef/CodeDef.js

@@ -7,7 +7,9 @@ import Bracket from './Bracket';
 import Comment from './Comment';
 import Identifier from './Identifier';
 import Keyword from './Keyword';
+import NumberValue from './Number';
 import Operator from './Operator';
+import StringValue from './String';
 import Type from './Type';
 
 const CodeDef = ({ className, children }) => (
@@ -24,7 +26,9 @@ CodeDef.Bracket = Bracket;
 CodeDef.Comment = Comment;
 CodeDef.Keyword = Keyword;
 CodeDef.Identifier = Identifier;
+CodeDef.Number = NumberValue;
 CodeDef.Operator = Operator;
+CodeDef.String = StringValue;
 CodeDef.Type = Type;
 
 export default CodeDef;

src/components/CodeDef/CodeDef.module.scss

@@ -29,3 +29,11 @@
 .block {
   margin-left: 1rem;
 }
+
+.string {
+  color: var(--color-green-500);
+}
+
+.number {
+  color: var(--color-red-400);
+}

src/components/CodeDef/Number.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styles from './CodeDef.module.scss';
+
+const NumberValue = ({ value }) => (
+  <span className={styles.number}>{value}</span>
+);
+
+NumberValue.propTypes = {
+  value: PropTypes.number.isRequired,
+};
+
+export default NumberValue;

src/components/CodeDef/String.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styles from './CodeDef.module.scss';
+
+const StringValue = ({ value }) => (
+  <span className={styles.string}>"{value}"</span>
+);
+
+StringValue.propTypes = {
+  value: PropTypes.string.isRequired,
+};
+
+export default StringValue;