diff --git a/app/layout.tsx b/app/layout.tsx
index 911a804b..cd13bab8 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -37,7 +37,7 @@ export default function RootLayout({
return (
<html lang="en">
<body className={`${GTFlexa.variable} antialiased`}>
- {getEnvironment() === "development" && <GridHelper />}
+ <GridHelper hideInProduction />
<Theme>
<ReactQueryProvider>
<Header />
diff --git a/components/global/gridHelper/GridHelper.tsx b/components/global/gridHelper/GridHelper.tsx
index 2881d819..2e1bf3c1 100644
--- a/components/global/gridHelper/GridHelper.tsx
+++ b/components/global/gridHelper/GridHelper.tsx
@@ -1,19 +1,22 @@
-'use client'
-import { useEffect, useState } from 'react'
+"use client"
+
+import { useEffect, useState } from "react"
+
+import withVisibility from "@/lib/helpers/visibility"
// This component is used to show a grid overlay on the screen when the user presses cmd + g
-export default function GridHelper() {
+function GridHelper() {
const [isShowing, setIsShowing] = useState(false)
useEffect(() => {
- window.addEventListener('keydown', handleKeydown)
+ window.addEventListener("keydown", handleKeydown)
return () => {
- window.removeEventListener('keydown', handleKeydown)
+ window.removeEventListener("keydown", handleKeydown)
}
}, [])
const handleKeydown = (event: KeyboardEvent) => {
- if (event.metaKey && event.key === 'g') {
+ if (event.metaKey && event.key === "k") {
setIsShowing(currentValue => !currentValue)
}
}
@@ -23,7 +26,7 @@ export default function GridHelper() {
return (
<>
{isShowing ? (
- <div className="content-container bg-transparent pointer-events-none fixed inset-0 z-[1000] mx-auto">
+ <div className="content-container pointer-events-none fixed inset-0 z-[1000] mx-auto bg-transparent">
<div className="grid-go h-full">
{Array.from({ length: columns }).map((e, index) => (
<div
@@ -37,3 +40,5 @@ export default function GridHelper() {
</>
)
}
+
+export default withVisibility(GridHelper)
diff --git a/lib/helpers/visibility.tsx b/lib/helpers/visibility.tsx
new file mode 100644
index 00000000..ae4c3310
--- /dev/null
+++ b/lib/helpers/visibility.tsx
@@ -0,0 +1,18 @@
+import React from "react"
+
+import { getEnvironment } from "@/lib/helpers/helper.env"
+
+interface WithVisibilityProps {
+ hideInProduction?: boolean
+}
+
+export default function withVisibility<P extends object>(WrappedComponent: React.ComponentType<P>) {
+ const ComponentWithVisibility = ({ hideInProduction, ...props }: P & WithVisibilityProps) => {
+ if (getEnvironment() === "production" && hideInProduction) {
+ return null
+ }
+ return <WrappedComponent {...(props as P)} />
+ }
+
+ return ComponentWithVisibility
+}