74 lines
1.8 KiB
TypeScript
74 lines
1.8 KiB
TypeScript
import React from "react";
|
|
import { HeatmapView } from "./HeatmapView.js";
|
|
|
|
interface HeatmapModalProps {
|
|
open: boolean;
|
|
onClose: () => void;
|
|
}
|
|
|
|
export function HeatmapModal({ open, onClose }: HeatmapModalProps) {
|
|
if (!open) return null;
|
|
|
|
return (
|
|
<div
|
|
role="dialog"
|
|
aria-modal="true"
|
|
aria-label="Token Usage Heatmap"
|
|
onClick={onClose}
|
|
style={{
|
|
position: "fixed",
|
|
inset: 0,
|
|
zIndex: 10000,
|
|
backgroundColor: "rgba(0, 0, 0, 0.65)",
|
|
backdropFilter: "blur(4px)",
|
|
display: "flex",
|
|
alignItems: "center",
|
|
justifyContent: "center",
|
|
padding: "20px",
|
|
overflowY: "auto",
|
|
}}
|
|
>
|
|
<div
|
|
onClick={(e) => e.stopPropagation()}
|
|
style={{
|
|
position: "relative",
|
|
width: "100%",
|
|
maxWidth: "1040px",
|
|
maxHeight: "92vh",
|
|
overflowY: "auto",
|
|
background: "var(--dsw-alias-bg-layer-1, #1e1e1e)",
|
|
border: "1px solid var(--dsw-alias-border-l2, #494949)",
|
|
borderRadius: "14px",
|
|
boxShadow: "0 16px 40px rgba(0, 0, 0, 0.5)",
|
|
padding: "24px 28px",
|
|
}}
|
|
>
|
|
{/* Close button */}
|
|
<button
|
|
onClick={onClose}
|
|
aria-label="Close dialog"
|
|
style={{
|
|
position: "absolute",
|
|
top: "16px",
|
|
right: "18px",
|
|
background: "transparent",
|
|
border: "none",
|
|
color: "var(--dsw-alias-label-tertiary, #a0a0a0)",
|
|
fontSize: "20px",
|
|
cursor: "pointer",
|
|
width: "32px",
|
|
height: "32px",
|
|
display: "flex",
|
|
alignItems: "center",
|
|
justifyContent: "center",
|
|
borderRadius: "6px",
|
|
}}
|
|
>
|
|
✕
|
|
</button>
|
|
|
|
<HeatmapView />
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|