Styling of home

components/shared/Section/Section.tsx

@@ -0,0 +1,26 @@
+import { createContext, FC, PropsWithChildren, useContext } from 'react'
+import styles from './Section.module.css'
+import cx from 'classnames'
+
+type SectionContextType = 'primary' | 'secondary' | 'tertiary' | undefined
+
+interface Props {
+  color?: SectionContextType
+}
+
+const SectionContext = createContext<SectionContextType>(undefined)
+export const useSectionColor = () => useContext(SectionContext)
+
+export const Section: FC<PropsWithChildren<Props>> = ({ color, children }) => {
+  return (
+    <div
+      className={cx(styles.content, {
+        [styles.primary]: color === 'primary',
+        [styles.secondary]: color === 'secondary',
+        [styles.tertiary]: color === 'tertiary'
+      })}
+    >
+      <SectionContext.Provider value={color}>{children}</SectionContext.Provider>
+    </div>
+  )
+}