feat(plans): publish honest Free and Pro

job-tracker-ui/src/components/ProFeatureNotice.tsx

@@ -0,0 +1,52 @@
+import React, { useState } from "react";
+import CloseIcon from "@mui/icons-material/Close";
+import { Alert, Button, IconButton, Stack, Typography } from "@mui/material";
+
+type Props = {
+  featureKey: string;
+  title: string;
+  children: React.ReactNode;
+};
+
+function storageKey(featureKey: string) {
+  return `jobtracker.proNoticeDismissed.${featureKey}`;
+}
+
+export default function ProFeatureNotice({ featureKey, title, children }: Props) {
+  const [dismissed, setDismissed] = useState(() => {
+    if (typeof window === "undefined") return false;
+    try {
+      return window.sessionStorage.getItem(storageKey(featureKey)) === "true";
+    } catch {
+      return false;
+    }
+  });
+
+  if (dismissed) return null;
+
+  const dismiss = () => {
+    try {
+      window.sessionStorage.setItem(storageKey(featureKey), "true");
+    } catch {
+      // The notice can still be dismissed for this render when storage is unavailable.
+    }
+    setDismissed(true);
+  };
+
+  return (
+    <Alert
+      severity="info"
+      action={(
+        <Stack direction="row" spacing={0.5} alignItems="center">
+          <Button href="/settings" size="small">View Pro</Button>
+          <IconButton size="small" aria-label={`Dismiss ${title}`} onClick={dismiss}>
+            <CloseIcon fontSize="small" />
+          </IconButton>
+        </Stack>
+      )}
+    >
+      <Typography component="span" sx={{ fontWeight: 800 }}>{title}</Typography>{" "}
+      {children}
+    </Alert>
+  );
+}