Adding a bare bones feature flag setup

website/src/components/Header/Header.tsx

@@ -2,6 +2,7 @@ import { Box, Button, Text, useColorMode } from "@chakra-ui/react";
 import Image from "next/image";
 import Link from "next/link";
 import { useSession } from "next-auth/react";
+import { Flags } from "react-feature-flags";
 import { FaUser } from "react-icons/fa";
 
 import { UserMenu } from "./UserMenu";
@@ -42,6 +43,9 @@ export function Header(props) {
           </Link>
         </div>
         <div className="flex items-center gap-4">
+          <Flags authorizedFlags={["flagTest"]}>
+            <div>FlagTest</div>
+          </Flags>
           <AccountButton />
           <UserMenu />
         </div>

website/src/flags.ts

@@ -0,0 +1,3 @@
+const flags = [{ name: "flagTest", isActive: false }];
+
+export default flags;

website/src/pages/_app.tsx

@@ -3,7 +3,9 @@ import "focus-visible";
 
 import type { AppProps } from "next/app";
 import { SessionProvider } from "next-auth/react";
+import { FlagsProvider } from "react-feature-flags";
 import { getDefaultLayout, NextPageWithLayout } from "src/components/Layout";
+import flags from "src/flags";
 
 import { Chakra, getServerSideProps } from "../styles/Chakra";
 
@@ -16,9 +18,11 @@ function MyApp({ Component, pageProps: { session, cookies, ...pageProps } }: App
   const page = getLayout(<Component {...pageProps} />);
 
   return (
-    <Chakra cookies={cookies}>
-      <SessionProvider session={session}>{page}</SessionProvider>
-    </Chakra>
+    <FlagsProvider value={flags}>
+      <Chakra cookies={cookies}>
+        <SessionProvider session={session}>{page}</SessionProvider>
+      </Chakra>
+    </FlagsProvider>
   );
 }
 export { getServerSideProps };