@bigdigital/kiosk-content-sdk
Version:
A Firebase-powered Content Management System SDK optimized for kiosks with offline support, template management, and real-time connection monitoring
40 lines • 2.21 kB
JavaScript
import React from 'react';
export function OfflineIndicator({ className = '', onlineText = 'Online', offlineText = 'Offline Mode', style, isOnline }) {
const defaultStyles = {
display: 'flex',
alignItems: 'center',
gap: '8px',
padding: '6px 12px',
borderRadius: '9999px',
fontSize: '14px',
fontWeight: 500,
transition: 'all 0.3s ease',
...style
};
const onlineStyles = {
...defaultStyles,
backgroundColor: 'rgba(34, 197, 94, 0.1)',
color: 'rgb(34, 197, 94)',
border: '1px solid rgba(34, 197, 94, 0.2)'
};
const offlineStyles = {
...defaultStyles,
backgroundColor: 'rgba(234, 179, 8, 0.1)',
color: 'rgb(234, 179, 8)',
border: '1px solid rgba(234, 179, 8, 0.2)'
};
return (React.createElement("div", { className: className, style: isOnline ? onlineStyles : offlineStyles },
React.createElement("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }, isOnline ? (React.createElement(React.Fragment, null,
React.createElement("path", { d: "M5 12.55a11 11 0 0 1 14.08 0" }),
React.createElement("path", { d: "M1.42 9a16 16 0 0 1 21.16 0" }),
React.createElement("path", { d: "M8.53 16.11a6 6 0 0 1 6.95 0" }),
React.createElement("line", { x1: "12", y1: "20", x2: "12", y2: "20" }))) : (React.createElement(React.Fragment, null,
React.createElement("line", { x1: "1", y1: "1", x2: "23", y2: "23" }),
React.createElement("path", { d: "M16.72 11.06A10.94 10.94 0 0 1 19 12.55" }),
React.createElement("path", { d: "M5 12.55A10.94 10.94 0 0 1 7.28 11.06" }),
React.createElement("path", { d: "M1.42 9a15.91 15.91 0 0 1 4.7-2.88" }),
React.createElement("path", { d: "M17.88 6.12a15.91 15.91 0 0 1 4.7 2.88" }),
React.createElement("line", { x1: "12", y1: "20", x2: "12", y2: "20" })))),
React.createElement("span", null, isOnline ? onlineText : offlineText)));
}
//# sourceMappingURL=OfflineIndicator.js.map