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

2
app/layout.tsx
View File

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

2
components/OfflineBanner.tsx
View File

@@ -9,7 +9,7 @@ export function OfflineBanner() {
if (isOnline) return null; if (isOnline) return null;
return ( 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" /> <FiWifiOff className="w-4 h-4" />
<span>You are currently offline. Changes may not be saved.</span> <span>You are currently offline. Changes may not be saved.</span>
</div> </div>