45 lines
1.1 KiB
TypeScript
45 lines
1.1 KiB
TypeScript
import React from 'react';
|
|
import { useSelector } from 'react-redux';
|
|
import { makeStyles } from 'tss-react/mui';
|
|
|
|
import { IReduxState } from '../../../app/types';
|
|
|
|
const useStyles = makeStyles()(theme => {
|
|
return {
|
|
notice: {
|
|
position: 'absolute',
|
|
left: '50%',
|
|
zIndex: 3,
|
|
marginTop: theme.spacing(2),
|
|
transform: 'translateX(-50%)'
|
|
},
|
|
|
|
message: {
|
|
backgroundColor: theme.palette.conferenceNoticeBackground,
|
|
color: theme.palette.conferenceNoticeText,
|
|
padding: '3px',
|
|
borderRadius: '5px'
|
|
}
|
|
};
|
|
});
|
|
|
|
const Notice = () => {
|
|
const message = useSelector((state: IReduxState) => state['features/base/config'].noticeMessage);
|
|
const { reducedUI } = useSelector((state: IReduxState) => state['features/base/responsive-ui']);
|
|
const { classes } = useStyles();
|
|
|
|
if (!message || reducedUI) {
|
|
return null;
|
|
}
|
|
|
|
return (
|
|
<div className = { classes.notice }>
|
|
<span className = { classes.message } >
|
|
{message}
|
|
</span>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Notice;
|