feat: Create shell for PropTypeInfo component

src/components/PropList.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import PropTypeInfo from './PropTypeInfo';
 import ReactMarkdown from 'react-markdown';
 import styles from './PropList.module.scss';
 
@@ -29,7 +30,13 @@ const PropList = ({ propTypes }) => {
                   </div>
                 )}
               </div>
-              <ReactMarkdown className={styles.details} source={description} />
+              <div className={styles.propInfo}>
+                <ReactMarkdown
+                  className={styles.details}
+                  source={description}
+                />
+                <PropTypeInfo type={type} />
+              </div>
             </div>
           );
         }
@@ -45,6 +52,7 @@ PropList.propTypes = {
       description: PropTypes.string,
       isRequired: PropTypes.bool,
       type: PropTypes.shape({
+        ...PropTypeInfo.propTypes.type,
         name: PropTypes.string.isRequired,
       }),
       defaultValue: PropTypes.string,

src/components/PropList.module.scss

@@ -11,6 +11,10 @@
 
 .info {
   width: 30%;
+
+  h3 {
+    margin-top: 0;
+  }
 }
 
 .default {
@@ -26,9 +30,16 @@
   color: var(--color-neutrals-600);
 }
 
+.propInfo {
+  width: 70%;
+}
+
 .details {
   font-size: 1.25rem;
-  width: 70%;
+
+  > *:first-child {
+    margin-top: 0;
+  }
 }
 
 .required {

src/components/PropTypeInfo.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const PropTypeInfo = ({ type }) => {
+  switch (type.name) {
+    case 'function':
+      return <div>func</div>;
+    default:
+      return null;
+  }
+};
+
+PropTypeInfo.propTypes = {
+  type: PropTypes.shape({
+    name: PropTypes.string.isRequired,
+  }),
+};
+
+export default PropTypeInfo;