39 lines
1.2 KiB
TypeScript
39 lines
1.2 KiB
TypeScript
import { createSignal, Show } from "solid-js";
|
|
|
|
/**
|
|
* Creates a trigger/signal pair for showing a brief "remote update" flash.
|
|
* Call `fire()` when a remote WebSocket update arrives; `visible()` goes
|
|
* true for `durationMs` then auto-clears.
|
|
*/
|
|
export function createRemoteFlash(durationMs = 3000) {
|
|
const [visible, setVisible] = createSignal(false);
|
|
let timer: ReturnType<typeof setTimeout> | null = null;
|
|
|
|
const fire = () => {
|
|
setVisible(true);
|
|
if (timer) clearTimeout(timer);
|
|
timer = setTimeout(() => {
|
|
setVisible(false);
|
|
timer = null;
|
|
}, durationMs);
|
|
};
|
|
|
|
return { visible, fire };
|
|
}
|
|
|
|
interface RemoteUpdateFlashProps {
|
|
when: boolean;
|
|
}
|
|
|
|
/**
|
|
* A small pill that briefly shows "Updated".
|
|
*/
|
|
export function RemoteUpdateFlash(props: RemoteUpdateFlashProps) {
|
|
return <Show when={props.when}>
|
|
<div class="remote-update-flash inline-flex items-center gap-1 rounded-full bg-emerald-100 border border-emerald-300 px-2 py-0.5 text-[10px] font-semibold uppercase tracking-widest text-emerald-700">
|
|
<svg viewBox="0 0 12 12" class="w-2.5 h-2.5 fill-current"><circle cx="6" cy="6" r="6"/></svg>
|
|
Updated
|
|
</div>
|
|
</Show>;
|
|
}
|