chore: mobile banner for inconsistency and auto redirect in wrong route (#704)01-24-chore_mobile_banner_for_inconsistency_and_auto_redirect_in_wrong_route

1 files changed, 24 insertions, 0 deletions

diff --git a/apps/web/components/new/mobile-banner.tsx b/apps/web/components/new/mobile-banner.tsx
new file mode 100644
index 00000000..245b6952
--- /dev/null
+++ b/apps/web/components/new/mobile-banner.tsx
@@ -0,0 +1,24 @@
+"use client"
+
+import { useIsMobile } from "@hooks/use-mobile"
+import { cn } from "@lib/utils"
+
+export function MobileBanner() {
+	const isMobile = useIsMobile()
+
+	if (!isMobile) {
+		return null
+	}
+
+	return (
+		<div
+			className={cn(
+				"bg-yellow-50 dark:bg-yellow-950/20 border-b border-yellow-200 dark:border-yellow-900/30",
+				"px-4 py-2 text-xs text-yellow-800 dark:text-yellow-200 text-center",
+			)}
+			id="mobile-development-banner"
+		>
+			🚧 Mobile responsive in development. Desktop recommended.
+		</div>
+	)
+}