Styling of home

components/shared/Heading.tsx

@@ -0,0 +1,35 @@
+import { createElement, FC, HTMLAttributes, PropsWithChildren } from 'react'
+import cx from 'classnames'
+import typography from '../../styles/typography.module.css'
+
+interface Props extends HTMLAttributes<HTMLSpanElement & HTMLHeadingElement> {
+  tag?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'span'
+  type: 'pageTitle' | 'section' | 'subsection'
+  className?: string
+}
+
+export const Heading: FC<PropsWithChildren<Props>> = ({
+  tag,
+  type,
+  className,
+  children,
+  ...rest
+}) => {
+  const TAG: Record<Props['type'], Exclude<Props['tag'], undefined>> = {
+    pageTitle: 'h1',
+    section: 'h2',
+    subsection: 'h3'
+  }
+  return createElement(
+    tag ?? TAG[type],
+    {
+      className: cx(className, {
+        [typography.displayLarge]: type === 'pageTitle',
+        [typography.headlineMedium]: type === 'section',
+        [typography.titleLarge]: type === 'subsection'
+      }),
+      ...rest
+    },
+    children
+  )
+}