27 lines
899 B
TypeScript
27 lines
899 B
TypeScript
import { CircularProgress, Grid2 as Grid } from "@mui/material";
|
|
import { CheckCircleOutline } from "@mui/icons-material";
|
|
|
|
interface Props {
|
|
pending: boolean;
|
|
accepted: boolean;
|
|
text: string;
|
|
}
|
|
|
|
/**
|
|
* Small inline status line used inside cards: a loading circle beside the
|
|
* caption while changes are pending, and a checkmark once they are accepted.
|
|
* Derive the flags with usePendingChanges (or per-item tracking like
|
|
* InteractionsOverview does).
|
|
*/
|
|
export default function PendingChangesIndicator(props: Props) {
|
|
const { pending, accepted, text } = props;
|
|
if (!pending && !accepted) return null;
|
|
|
|
return (
|
|
<Grid container spacing={0.5} alignItems="center">
|
|
{pending && <CircularProgress size={10} thickness={5} color="inherit" />}
|
|
{accepted && <CheckCircleOutline sx={{ fontSize: 13, color: "var(--status-ok)" }} />}
|
|
<Grid>{text}</Grid>
|
|
</Grid>
|
|
);
|
|
}
|