Add header sizing

web/components/PortableTextBlock.js

@@ -19,13 +19,23 @@ export default function PortableTextBlock(props) {
     ...rest
   } = props
 
+  const getFontSize = (level) => {
+    switch(level) {
+      case "h2" :
+        return {base: "lg", sm: "2xl", md: "3xl", xl: "4xl"}
+      case "h3" :
+        return {base: "md", sm: "xl", md: "2xl", xl: "3xl"}
+      default : return null
+    }
+  }
+
   const BlockRenderer = (props) => {
     if(!props) {return null}
     const {style = 'normal'} = props.node
 
     if (/^h\d/.test(style)) {
       const level = style
-      return(<Heading as={level} fontSize={fontSize}>{props.children}</Heading>)
+      return(<Heading as={level} fontSize={getFontSize(level)}>{props.children}</Heading>)
     }
 
     if (style === 'blockquote') {