85 lines · 2.8 KB
import { useEffect, useState } from "react";
import { Link } from "@tanstack/react-router";
import { buttonClass } from "~/ui/Button";
import { TONE_SURFACE } from "~/ui/tones";
import type { Tone } from "~/ui/tones";
import { cn } from "~/utils/cn";

const DAY_MS = 24 * 60 * 60 * 1000;
const PREFIX = "gitfor:nag:";

type Action = { label: string; to: string } | { label: string; onClick: () => void };

type Props = {
  /** Stable id; snoozing is remembered per id in this browser. */
  id: string;
  tone?: Tone;
  title: React.ReactNode;
  children?: React.ReactNode;
  action?: Action;
  secondary?: Action;
  /** Days "Remind me later" hides it for; 0 hides the button and keeps the banner until resolved. */
  snoozeDays?: number;
};

function snoozedUntil(id: string): number {
  try {
    return Number(localStorage.getItem(PREFIX + id) ?? 0);
  } catch {
    return 0;
  }
}

function ActionButton({ action, primary }: { action: Action; primary: boolean }) {
  const className = buttonClass(primary ? "primary" : "secondary", "sm");
  if ("to" in action) {
    return (
      <Link to={action.to} className={className}>
        {action.label}
      </Link>
    );