feat(preview): add banner as a root component instead of a strapi com…

…ponent for every page
digitalservicebund · Jan 8, 2024 · fcc4ea3 · fcc4ea3
1 parent 8fe92f1
commit fcc4ea3
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 0 deletions.
diff --git a/app/components/EnvironmentBanner.tsx b/app/components/EnvironmentBanner.tsx
@@ -0,0 +1,21 @@
+import { config as configWeb } from "~/services/env/web";
+import WarningAmber from "@digitalservicebund/icons/WarningAmber";
+import Background from "./Background";
+import Container from "./Container";
+
+export function EnvironmentBanner() {
+  return configWeb().ENVIRONMENT !== "production" ? (
+    <Background backgroundColor="yellow">
+      <Container paddingTop="16" paddingBottom="16">
+        <div className="flex gap-16">
+          <WarningAmber />
+          <p className="max-w-full">
+            Vorsicht: Sie befinden sich auf unserer Testumgebung!
+          </p>
+        </div>
+      </Container>
+    </Background>
+  ) : (
+    ""
+  );
+}
diff --git a/app/root.tsx b/app/root.tsx
@@ -37,6 +37,7 @@ import { getPageHeaderProps } from "./services/cms/models/StrapiPageHeader";
 import { getCookieBannerProps } from "./services/cms/models/StrapiCookieBannerSchema";
 import FeedbackBanner, { augmentFeedback } from "./components/FeedbackBanner";
 import { getStrapiFeedback } from "./services/cms/models/StrapiGlobal";
+import { EnvironmentBanner } from "./components/EnvironmentBanner";
 
 export const headers: HeadersFunction = () => ({
   "X-Frame-Options": "SAMEORIGIN",
@@ -157,6 +158,7 @@ function App() {
           hasTrackingConsent={hasTrackingConsent}
           content={cookieBannerContent}
         />
+        <EnvironmentBanner />
         <Header {...header} />
         <Breadcrumbs breadcrumbs={breadcrumbs} />
         <main className="flex-grow">
@@ -182,6 +184,7 @@ export function ErrorBoundary() {
         <Links />
       </head>
       <body className="flex flex-col min-h-screen">
+        <EnvironmentBanner />
         {loaderData && <Header {...loaderData.header} />}
         <main className="flex-grow">
           <ErrorBox