Push Notification

OS/browser-level notification.

html

<div class="push push--desktop" role="status">
  <span class="push__icon" style="background:#241430;" aria-hidden="true"></span>
  <div class="push__body">
    <p class="push__app">Clydeford <time class="push__time" datetime="2026-08-18T09:14">now</time></p>
    <p class="push__message">Your export finished and is ready to download.</p>
    <div class="push__actions"><button class="push__action" type="button">Open</button><button class="push__action" type="button">Dismiss</button></div>
  </div>
</div>
<style>
.push { display: flex; gap: 10px; width: 320px; box-sizing: border-box; padding: 12px; background: #FAF7F2; color: #241430; box-shadow: 0 6px 20px rgba(36,20,48,.22); font: 13px/1.4 system-ui, sans-serif; }
.push--desktop { border-radius: 10px; }
.push--mobile { border-radius: 18px; padding: 14px; }
.push__icon { width: 30px; height: 30px; border-radius: 8px; flex-shrink: 0; }
.push--mobile .push__icon { border-radius: 50%; }
.push__app { margin: 0 0 2px; display: flex; justify-content: space-between; font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: .03em; color: #24143099; }
.push__time { text-transform: none; letter-spacing: normal; font-weight: 400; }
.push__message { margin: 0; }
.push__actions { display: flex; gap: 8px; margin-top: 8px; }
.push__action { border: 1px solid #24143030; background: transparent; border-radius: 6px; padding: 4px 10px; font: 600 12px system-ui, sans-serif; cursor: pointer; }
.push__action:focus-visible { outline: 2px solid #241430; outline-offset: 2px; }
</style>

tailwind

<div role="status" class="push-tw push-tw--desktop flex gap-2.5 w-80 box-border p-3 bg-[#FAF7F2] text-[#241430] shadow-lg text-[13px]">
  <span aria-hidden="true" class="push-tw__icon w-[30px] h-[30px] flex-shrink-0" style="background:#241430"></span>
  <div class="flex-1">
    <p class="m-0 mb-0.5 flex justify-between font-semibold text-xs uppercase tracking-wide text-[#241430]/60">Clydeford <time class="normal-case tracking-normal font-normal" datetime="2026-08-18T09:14">now</time></p>
    <p class="m-0">Your export finished and is ready to download.</p>
    <div class="flex gap-2 mt-2"><button type="button" class="border border-[#24143030] bg-transparent rounded-md px-2.5 py-1 text-xs font-semibold cursor-pointer">Open</button><button type="button" class="border border-[#24143030] bg-transparent rounded-md px-2.5 py-1 text-xs font-semibold cursor-pointer">Dismiss</button></div>
  </div>
</div>
<style>
.push-tw--desktop { border-radius: 10px; }
.push-tw--desktop .push-tw__icon { border-radius: 8px; }
.push-tw--mobile { border-radius: 18px; padding: 14px; }
.push-tw--mobile .push-tw__icon { border-radius: 50%; }
</style>

react

export function PushNotification({
  appName = "Clydeford",
  message = "Your export finished and is ready to download.",
  platform = "desktop",
  accent = "#241430",
  showActions = true,
}) {
  const mobile = platform === "mobile";
  return (
    <div role="status" style={{ display: "flex", gap: 10, width: 320, boxSizing: "border-box",
      padding: mobile ? 14 : 12, background: "#FAF7F2", color: "#241430",
      borderRadius: mobile ? 18 : 10, boxShadow: "0 6px 20px rgba(36,20,48,.22)", fontSize: 13 }}>
      <span aria-hidden="true" style={{ width: 30, height: 30, borderRadius: mobile ? "50%" : 8, background: accent, flexShrink: 0 }} />
      <div style={{ flex: 1 }}>
        <p style={{ margin: "0 0 2px", display: "flex", justifyContent: "space-between", fontWeight: 600, fontSize: 12, textTransform: "uppercase", letterSpacing: .03, color: "#24143099" }}>
          {appName} <time style={{ textTransform: "none", fontWeight: 400 }} dateTime="2026-08-18T09:14">now</time>
        </p>
        <p style={{ margin: 0 }}>{message}</p>
        {showActions && (
          <div style={{ display: "flex", gap: 8, marginTop: 8 }}>
            <button type="button" style={{ border: "1px solid #24143030", background: "transparent", borderRadius: 6, padding: "4px 10px", fontSize: 12, fontWeight: 600, cursor: "pointer" }}>Open</button>
            <button type="button" style={{ border: "1px solid #24143030", background: "transparent", borderRadius: 6, padding: "4px 10px", fontSize: 12, fontWeight: 600, cursor: "pointer" }}>Dismiss</button>
          </div>
        )}
      </div>
    </div>
  );
}