ciphera-net/pulse
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 15 Wiki Activity

feat: add OfflineBanner component to LayoutContent for offline notifications and update styles in OfflineBanner

Browse Source
This commit is contained in:
Usman Baig
2026-02-04 11:00:21 +01:00
parent 73dac1b170
commit 2a0380189d
3 changed files with 3 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
app/layout-content.tsx
View File

@@ -1,5 +1,6 @@
'use client'
import { OfflineBanner } from '@/components/OfflineBanner'
import { Header, Footer } from '@ciphera-net/ui'
import { useAuth } from '@/lib/auth/context'
import Link from 'next/link'
@@ -53,6 +54,7 @@ export default function LayoutContent({ children }: { children: React.ReactNode
showSecurity={false}
showPricing={true}
/>
<OfflineBanner />
<main className="flex-1 pt-24 pb-8">
{children}
</main>

2
app/layout.tsx
View File

@@ -1,4 +1,3 @@
import { OfflineBanner } from '@/components/OfflineBanner'
import { ThemeProviders, Toaster } from '@ciphera-net/ui'
import { AuthProvider } from '@/lib/auth/context'
import type { Metadata, Viewport } from 'next'
@@ -47,7 +46,6 @@ export default function RootLayout({
return (
<html lang="en" className={plusJakartaSans.variable} suppressHydrationWarning>
<body className="antialiased min-h-screen flex flex-col bg-white dark:bg-neutral-950 text-neutral-900 dark:text-neutral-50">
<OfflineBanner />
<ThemeProviders>
<AuthProvider>
<LayoutContent>{children}</LayoutContent>

2
components/OfflineBanner.tsx
View File

@@ -9,7 +9,7 @@ export function OfflineBanner() {
if (isOnline) return null;
return (
<div className="bg-yellow-500/10 border-b border-yellow-500/20 text-yellow-600 px-4 py-2 text-sm flex items-center justify-center gap-2 font-medium z-50 relative">
<div className="bg-yellow-500/10 dark:bg-yellow-500/20 border-b border-yellow-500/20 dark:border-yellow-500/30 text-yellow-600 dark:text-yellow-400 px-4 py-2 text-sm flex items-center justify-center gap-2 font-medium">
<FiWifiOff className="w-4 h-4" />
<span>You are currently offline. Changes may not be saved.</span>
</div>