44 lines
1.0 KiB
TypeScript
44 lines
1.0 KiB
TypeScript
interface ReadOnlyAccessNoticeProps {
|
|
title?: string;
|
|
message?: string;
|
|
}
|
|
|
|
export default function ReadOnlyAccessNotice({
|
|
title = "Viewer Mode Enabled",
|
|
message = "Your role is read-only. Buttons and forms that change data are disabled on this page.",
|
|
}: ReadOnlyAccessNoticeProps) {
|
|
return (
|
|
<div
|
|
className="card"
|
|
style={{
|
|
padding: "12px 16px",
|
|
marginBottom: 16,
|
|
display: "flex",
|
|
alignItems: "center",
|
|
gap: 10,
|
|
color: "#f59e0b",
|
|
border: "1px solid rgba(245,158,11,0.28)",
|
|
background: "rgba(245,158,11,0.08)",
|
|
}}
|
|
>
|
|
<div
|
|
style={{
|
|
width: 8,
|
|
height: 8,
|
|
borderRadius: "50%",
|
|
background: "currentColor",
|
|
flexShrink: 0,
|
|
}}
|
|
/>
|
|
<div>
|
|
<p style={{ fontSize: 12, fontWeight: 700, color: "#fbbf24" }}>
|
|
{title}
|
|
</p>
|
|
<p style={{ fontSize: 12, color: "var(--text-secondary)" }}>
|
|
{message}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|