move create context for page bur

courseup/src/app/Content.tsx

@@ -3,20 +3,23 @@
 import { useState } from 'react';
 import { Header } from 'components/common/header';
 import classNames from 'classnames';
+import BlurContext from 'components/common/BlurContext';
 
 export default function Content({ children }: Readonly<{ children: React.ReactNode }>): React.ReactNode {
   const [blurBackground, setBlurBackground] = useState(false);
 
   return (
     <>
       <Header blurBackground={blurBackground} setBlurBackground={setBlurBackground} />
-      {blurBackground ? (
-        <div className={classNames('pointer-events-none transition-all', { 'blur-md': blurBackground })}>
-          {children}
-        </div>
-      ) : (
-        <div>{children}</div>
-      )}
+      <BlurContext.Provider value={{ blurBackground: blurBackground, setBlurBackground: setBlurBackground }}>
+        {blurBackground ? (
+          <div className={classNames('pointer-events-none transition-all', { 'blur-md': blurBackground })}>
+            {children}
+          </div>
+        ) : (
+          <div>{children}</div>
+        )}
+      </BlurContext.Provider>
     </>
   );
 }

courseup/src/components/common/BlurContext/BlurContext.tsx

@@ -0,0 +1,9 @@
+import { Context, createContext } from 'react';
+import { Dispatch, SetStateAction } from 'react';
+
+export const BlurContext: Context<Blur> = createContext<Blur>({ blurBackground: false, setBlurBackground: () => {} });
+
+interface Blur {
+  blurBackground: Readonly<boolean>;
+  setBlurBackground: Dispatch<SetStateAction<boolean>>;
+}

courseup/src/components/common/BlurContext/index.ts

@@ -0,0 +1,2 @@
+import { BlurContext } from './BlurContext';
+export default BlurContext;