70 lines
1.9 KiB
TypeScript
70 lines
1.9 KiB
TypeScript
import Stack from "@mui/material/Stack";
|
|
import Typography from "@mui/material/Typography";
|
|
import { BaseBox } from "@/components/design-elements";
|
|
import Box from "@mui/material/Box";
|
|
import { useTheme } from "@mui/material/styles";
|
|
|
|
export interface ResolutionCardProps {
|
|
resolved: boolean;
|
|
type?: string;
|
|
by?: string;
|
|
note?: string;
|
|
timestampLabel: string; // preformatted timestamp label
|
|
durationLabel?: string; // optional preformatted duration
|
|
}
|
|
|
|
export const ResolutionCard = ({
|
|
resolved,
|
|
type,
|
|
by,
|
|
note,
|
|
timestampLabel,
|
|
durationLabel,
|
|
}: ResolutionCardProps) => {
|
|
const theme = useTheme();
|
|
const bg = resolved
|
|
? theme.palette.success.lowContrast
|
|
: theme.palette.error.lowContrast;
|
|
|
|
return (
|
|
<BaseBox sx={{ maxWidth: 560 }}>
|
|
<Box sx={{ bgcolor: bg, p: 6 }}>
|
|
<Typography variant="h6" color="textPrimary">
|
|
Resolution
|
|
</Typography>
|
|
</Box>
|
|
<Stack spacing={3} padding={6}>
|
|
<Typography variant="body2" color="textPrimary">
|
|
Status:{" "}
|
|
<span style={{ color: bg }}>
|
|
{resolved ? "resolved" : "unresolved"}
|
|
</span>
|
|
</Typography>
|
|
{resolved && (
|
|
<>
|
|
<Typography variant="body2" color="textPrimary">
|
|
Resolution type: {type || "N/A"}
|
|
</Typography>
|
|
<Typography variant="body2" color="textPrimary">
|
|
Resolved by: {by || "N/A"}
|
|
</Typography>
|
|
</>
|
|
)}
|
|
<Typography variant="body2" color="textPrimary">
|
|
{timestampLabel}
|
|
</Typography>
|
|
{durationLabel && (
|
|
<Typography variant="body2" color="textSecondary">
|
|
{durationLabel}
|
|
</Typography>
|
|
)}
|
|
<Typography variant="body2" color="textSecondary">
|
|
Note: {note || "N/A"}
|
|
</Typography>
|
|
</Stack>
|
|
</BaseBox>
|
|
);
|
|
};
|
|
|
|
export default ResolutionCard;
|