82 lines
1.9 KiB
TypeScript
82 lines
1.9 KiB
TypeScript
import styled, { css } from 'styled-components';
|
|
|
|
import { AlertType } from '@/constants/alerts';
|
|
import { layoutMixins } from '@/styles/layoutMixins';
|
|
|
|
type StyleProps = {
|
|
className?: string;
|
|
type: AlertType;
|
|
};
|
|
|
|
type ElementProps = {
|
|
children: React.ReactNode;
|
|
};
|
|
|
|
export type AlertMessageProps = ElementProps & StyleProps;
|
|
|
|
export const AlertMessage: React.FC<AlertMessageProps> = ({ className, children, type }) => {
|
|
return (
|
|
<AlertContainer type={type} className={className}>
|
|
{children}
|
|
</AlertContainer>
|
|
);
|
|
};
|
|
|
|
const AlertContainer = styled.div<StyleProps>`
|
|
${layoutMixins.column}
|
|
|
|
--alert-accent-color: transparent;
|
|
--alert-default-background-opacity: 0.1;
|
|
--alert-background: linear-gradient(transparent, var(--alert-accent-color)) 0
|
|
clamp(0%, var(--alert-default-background-opacity) * 100%, 100%) / auto 10000vmax;
|
|
|
|
${({ type }) => {
|
|
switch (type) {
|
|
case AlertType.Error: {
|
|
return css`
|
|
--alert-accent-color: var(--color-error);
|
|
`;
|
|
}
|
|
case AlertType.Info: {
|
|
return css`
|
|
--alert-accent-color: var(--color-text-1);
|
|
|
|
--alert-default-background-opacity: 0.133; // Relative
|
|
// --alert-background: var(--color-layer-6); // Absolute
|
|
`;
|
|
}
|
|
case AlertType.Success: {
|
|
return css`
|
|
--alert-accent-color: var(--color-success);
|
|
`;
|
|
}
|
|
case AlertType.Warning: {
|
|
return css`
|
|
--alert-accent-color: var(--color-warning);
|
|
`;
|
|
}
|
|
default:
|
|
return '';
|
|
}
|
|
}}
|
|
|
|
overflow: auto;
|
|
position: relative;
|
|
max-height: 12.5rem;
|
|
gap: 0.25em;
|
|
|
|
font-size: 0.8125em;
|
|
|
|
padding: 0.625em 0.75em;
|
|
|
|
color: var(--color-text-2);
|
|
|
|
background: var(--alert-background);
|
|
border-left: 0.25em solid var(--alert-accent-color);
|
|
border-radius: 0.25em;
|
|
|
|
white-space: pre-wrap;
|
|
|
|
user-select: all;
|
|
`;
|