chore: refactored banner. Failed at admin panel implementation

src/components/Cashout/Cashout.tsx

@@ -4,6 +4,7 @@ import * as _consts from './Cashout.consts'
 import { interfaces as peanutInterfaces } from '@squirrel-labs/peanut-sdk'
 import * as consts from '@/constants'
 import { OfframpType } from '../Offramp/Offramp.consts'
+
 export const Cashout = ({}) => {
     const [step, setStep] = useState<_consts.ICashoutScreenState>(_consts.INIT_VIEW_STATE)
     const [tokenValue, setTokenValue] = useState<undefined | string>(undefined)

src/components/Global/Banner/GenericBanner.tsx

@@ -0,0 +1,18 @@
+import { MarqueeWrapper } from '../MarqueeWrapper'
+
+interface GenericBannerProps {
+    message: string
+    backgroundColor?: string
+    icon?: string
+}
+
+export function GenericBanner({ message, backgroundColor = 'bg-purple-1', icon }: GenericBannerProps) {
+    return (
+        <MarqueeWrapper backgroundColor={backgroundColor} direction="left">
+            <span className="z-10 mx-4 text-sm font-semibold">
+                {icon && <span className="mr-2">{icon}</span>}
+                {message}
+            </span>
+        </MarqueeWrapper>
+    )
+}

src/components/Global/Banner/MaintenanceBanner.tsx

@@ -0,0 +1,16 @@
+import { GenericBanner } from './GenericBanner'
+import config from '@/config/routesUnderMaintenance'
+
+interface MaintenanceBannerProps {
+    pathname: string
+}
+
+export function MaintenanceBanner({ pathname }: MaintenanceBannerProps) {
+    const isUnderMaintenance = config.routes.some((route) => pathname.startsWith(route))
+
+    if (!isUnderMaintenance) {
+        return null
+    }
+
+    return <GenericBanner message="Under maintenance" icon="⚠️" />
+}

src/components/Global/Banner/index.tsx

@@ -1,27 +1,23 @@
 import { usePathname } from 'next/navigation'
-import { MarqueeWrapper } from '../MarqueeWrapper'
+import { GenericBanner } from './GenericBanner'
+import { MaintenanceBanner } from './MaintenanceBanner'
+import { MAINTAINABLE_ROUTES } from '@/config/routesUnderMaintenance'
 
 export function Banner() {
     const pathname = usePathname()
-    const isCashout = pathname.startsWith('/cashout')
-    const isRequest = pathname.startsWith('/request')
+    if (!pathname) return null
 
-    // Return null if not on cashout or request pages
-    if (!isCashout && !isRequest) return null
+    // First check for maintenance
+    const maintenanceBanner = <MaintenanceBanner pathname={pathname} />
+    if (maintenanceBanner) return maintenanceBanner
 
-    // Show maintenance message for cashout
-    if (isCashout) {
-        return (
-            <MarqueeWrapper backgroundColor="bg-purple-1" direction="left">
-                <span className="z-10 mx-4 text-sm font-semibold">⚠️ Under maintenance</span>
-            </MarqueeWrapper>
-        )
+    // Show beta message for all request paths (create and pay) unless under maintenance
+    if (pathname.startsWith(MAINTAINABLE_ROUTES.REQUEST)) {
+        return <GenericBanner message="Beta feature - share your thoughts!" backgroundColor="bg-purple-1" />
     }
 
-    // Show beta message for request
-    return (
-        <MarqueeWrapper backgroundColor="bg-purple-1" direction="left">
-            <span className="z-10 mx-4 text-sm font-semibold">Beta feature - share your thoughts!</span>
-        </MarqueeWrapper>
-    )
+    return null
 }
+
+export { GenericBanner } from './GenericBanner'
+export { MaintenanceBanner } from './MaintenanceBanner'

src/config/routesUnderMaintenance.ts

@@ -0,0 +1,19 @@
+interface MaintenanceConfig {
+    routes: string[]
+}
+
+export const MAINTAINABLE_ROUTES = {
+    CASHOUT: '/cashout',
+    REQUEST: '/request',
+    SEND: '/send',
+    CLAIM: '/claim',
+} as const
+
+// Static configuration - edit this file to change maintenance state
+const config: MaintenanceConfig = {
+    routes: [
+        MAINTAINABLE_ROUTES.CASHOUT, // Routes under maintenance
+    ],
+}
+
+export default config