add: backoffice feature flag wrapper component

components/FeatureFlags/BackOfficeWrapper.tsx

@@ -0,0 +1,13 @@
+type BackOfficeWrapperProps = {
+  children: React.ReactNode;
+};
+
+export default function BackOfficeWrapper({
+  children,
+}: BackOfficeWrapperProps) {
+  if (process.env.NEXT_PUBLIC_BACKOFFICE_FEATURE_FLAG === "true") {
+    return <>{children}</>;
+  }
+
+  return null;
+}

components/JoinUs/index.jsx

@@ -1,10 +1,14 @@
+import BackOfficeWrapper from "@components/FeatureFlags/BackOfficeWrapper";
+
 export default function JoinUs(props) {
   return (
-    <a
-      href="https://sei23.eventbrite.pt"
-      className={`flex h-28 w-28 flex-shrink-0 rotate-15 transform items-center justify-center font-ibold text-xl text-${props.fgColor} bg-${props.button} translate-x-0 select-none rounded-full`}
-    >
-      Join us 👋
-    </a>
+    <BackOfficeWrapper>
+      <a
+        href="https://sei23.eventbrite.pt"
+        className={`flex h-28 w-28 flex-shrink-0 rotate-15 transform items-center justify-center font-ibold text-xl text-${props.fgColor} bg-${props.button} translate-x-0 select-none rounded-full`}
+      >
+        Join us 👋
+      </a>
+    </BackOfficeWrapper>
   );
 }