From 9415bee63ec839707a47b9679f60f3bef23a0595 Mon Sep 17 00:00:00 2001
From: Niels Baggerman <niels.baggerman@notive.nl>
Date: Thu, 18 Apr 2024 08:43:33 +0200
Subject: [PATCH] feat: added global constants

---
 next.constants.mjs | 8 ++++++++
 src/app/layout.tsx | 6 +++---
 2 files changed, 11 insertions(+), 3 deletions(-)
 create mode 100644 next.constants.mjs

diff --git a/next.constants.mjs b/next.constants.mjs
new file mode 100644
index 0000000..0d68149
--- /dev/null
+++ b/next.constants.mjs
@@ -0,0 +1,8 @@
+'use strict';
+
+import { env } from "~/env";
+
+/**
+ * This is used to verify if the current site is running on a development environment.
+ */
+export const IS_DEVELOPMENT = env.NODE_ENV === 'development';
\ No newline at end of file
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index ff4ec5e..1923057 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,8 +1,8 @@
 import type { Metadata } from 'next';
+import { IS_DEVELOPMENT } from 'next.constants.mjs';
 import { Inter } from 'next/font/google';
 
 import { ScreenSize } from '~/components/atoms/utils/ScreenSize';
-import { env } from '~/env';
 import '~/styles/globals.css';
 import '~/styles/tailwind.css';
 
@@ -24,8 +24,8 @@ export default function RootLayout({
 				{children}
 
 				{/*	In development mode, render a fixed component displaying the current viewport 
-						width and corresponding Tailwind breakpoint, as a helper for responsive design. */}
-				{env.NODE_ENV === 'development' && <ScreenSize />}
+					width and corresponding Tailwind breakpoint, as a helper for responsive design. */}
+				{IS_DEVELOPMENT && <ScreenSize />}
 			</body>
 		</html>
 	);