PULSE-31: PWA support and offline banner #4
@@ -40,8 +40,12 @@ export default function LayoutContent({ children }: { children: React.ReactNode
|
||||
router.push('/onboarding')
|
||||
|
|
||||
}
|
||||
|
||||
const showOfflineBar = Boolean(auth.user && !isOnline);
|
||||
const barHeightRem = '2.5rem';
|
||||
|
||||
return (
|
||||
<>
|
||||
{auth.user && <OfflineBanner />}
|
||||
<Header
|
||||
auth={auth}
|
||||
LinkComponent={Link}
|
||||
@@ -55,9 +59,9 @@ export default function LayoutContent({ children }: { children: React.ReactNode
|
||||
showFaq={false}
|
||||
showSecurity={false}
|
||||
showPricing={true}
|
||||
bottomContent={auth.user ? <OfflineBanner /> : undefined}
|
||||
topOffset={showOfflineBar ? barHeightRem : undefined}
|
||||
/>
|
||||
<main className={`flex-1 pb-8 ${auth.user && !isOnline ? 'pt-32' : 'pt-24'}`}>
|
||||
<main className={`flex-1 pb-8 ${showOfflineBar ? 'pt-[8.5rem]' : 'pt-24'}`}>
|
||||
{children}
|
||||
</main>
|
||||
<Footer
|
||||
|
||||
@@ -9,8 +9,8 @@ export function OfflineBanner() {
|
||||
if (isOnline) return null;
|
||||
|
||||
return (
|
||||
<div className="rounded-b-2xl 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 sm:px-8 py-2 text-sm flex items-center justify-center gap-2 font-medium">
|
||||
<FiWifiOff className="w-4 h-4" />
|
||||
<div className="fixed top-0 left-0 right-0 z-[100] rounded-b-xl bg-yellow-500/15 dark:bg-yellow-500/25 border-b border-yellow-500/30 dark:border-yellow-500/40 text-yellow-700 dark:text-yellow-300 px-4 sm:px-8 py-2.5 text-sm flex items-center justify-center gap-2 font-medium shadow-md">
|
||||
<FiWifiOff className="w-4 h-4 shrink-0" />
|
||||
<span>You are currently offline. Changes may not be saved.</span>
|
||||
</div>
|
||||
);
|
||||
|
||||
8
package-lock.json
generated
8
package-lock.json
generated
@@ -8,7 +8,7 @@
|
||||
"name": "pulse-frontend",
|
||||
"version": "0.1.0",
|
||||
"dependencies": {
|
||||
"@ciphera-net/ui": "^0.0.41",
|
||||
"@ciphera-net/ui": "^0.0.42",
|
||||
"@ducanh2912/next-pwa": "^10.2.9",
|
||||
"axios": "^1.13.2",
|
||||
"country-flag-icons": "^1.6.4",
|
||||
@@ -1467,9 +1467,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@ciphera-net/ui": {
|
||||
"version": "0.0.41",
|
||||
"resolved": "https://npm.pkg.github.com/download/@ciphera-net/ui/0.0.41/3f5042af5890632050f2c6ae6b389a6899cfdc6c",
|
||||
"integrity": "sha512-egkw5aN5+kZMW7A0AKlFU2ToAZIBTMTJKWzZbxo/fo/hxavZt5YdW7r/iHesY28gbUsNuWrRN7sQ3U9sYUcNSw==",
|
||||
"version": "0.0.42",
|
||||
"resolved": "https://npm.pkg.github.com/download/@ciphera-net/ui/0.0.42/f3476f7f1e6e2210b4c7b1ae84964777e1b2b718",
|
||||
"integrity": "sha512-PuzwXKR2DrtTWXELDFH5GhQxnz0qPHTNGtMbTdhslWEp/taEy+n3UsoBp+NFw0uQEvz7mHQ9PgDpDVztQncMfw==",
|
||||
"dependencies": {
|
||||
"@radix-ui/react-icons": "^1.3.0",
|
||||
"clsx": "^2.1.0",
|
||||
|
||||
@@ -10,7 +10,7 @@
|
||||
"type-check": "tsc --noEmit"
|
||||
},
|
||||
"dependencies": {
|
||||
"@ciphera-net/ui": "^0.0.41",
|
||||
"@ciphera-net/ui": "^0.0.42",
|
||||
"@ducanh2912/next-pwa": "^10.2.9",
|
||||
"axios": "^1.13.2",
|
||||
"country-flag-icons": "^1.6.4",
|
||||
|
||||
Reference in New Issue
Block a user
Moved auth check to parent instead of keeping it in
OfflineBanner- the banner now only handles online/offline state while this component controls when it shows based on authentication.Note: If this suggestion doesn't match your team's coding style, reply to this and let me know. I'll remember it for next time!
Prompt To Fix With AI
barHeightRemis defined but not used in thept-[8.5rem]calculation on line 64. The hardcoded value could get out of sync if the banner height changes.Prompt To Fix With AI