Review this generated status card before it handles production data.
Render an untrusted message as plain text, use a clamped numeric hue, support a compact variant, preserve component state, and add no animation.
TSX
import styled from 'styled-components';
type Props = { hue: number; compact: boolean; message: string };
export function StatusCard({ hue, compact, message }: Props) {
const Card = styled.article<{ hue: number; compact: boolean }>`
color: hsl(${({ hue }) => hue} 70% 35%);
padding: ${({ compact }) => (compact ? '0.25rem' : '0.75rem')};
`;
return (
<Card
hue={hue}
compact={compact}
dangerouslySetInnerHTML={{ __html: message }}
/>
);
}
generated code is illustrative, not from any one model