Files
MealQuest/web/src/pwa/OfflinePill.tsx
T
dev_agent 81c5085f9a
CI / ci (push) Successful in 1m40s
Feature 06: PWA shell and offline (#58)
Co-authored-by: dev_agent <dev_agent@cubecraftlabs.com>
2026-10-05 15:22:37 -04:00

20 lines
654 B
TypeScript

import { useSyncExternalStore } from 'react'
import { WifiOff } from 'lucide-react'
import { useApi } from '../api/index.ts'
import { Icon } from '../ui/Icon.tsx'
import styles from './OfflinePill.module.css'
// OfflinePill tells the household that what they see came from the cache
// while the browser is offline or the server cannot be reached.
export function OfflinePill() {
const { network } = useApi()
const offline = useSyncExternalStore(network.subscribe, network.offline)
if (!offline) return null
return (
<p role="status" className={styles.pill}>
<Icon icon={WifiOff} />
Offline — showing saved data
</p>
)
}