48 lines
1.1 KiB
TypeScript
48 lines
1.1 KiB
TypeScript
|
import type { PropsWithChildren } from 'react';
|
||
|
|
import { useCallback, useState } from 'react';
|
||
|
|
|
||
|
|
import { defineMessages, useIntl } from 'react-intl';
|
||
|
|
|
||
|
|
import { bannerSettings } from 'flavours/glitch/settings';
|
||
|
|
|
||
|
|
import { IconButton } from './icon_button';
|
||
|
|
|
||
|
|
const messages = defineMessages({
|
||
|
|
dismiss: { id: 'dismissable_banner.dismiss', defaultMessage: 'Dismiss' },
|
||
|
|
});
|
||
|
|
|
||
|
|
interface Props {
|
||
|
|
id: string;
|
||
|
|
}
|
||
|
|
|
||
|
|
export const DismissableBanner: React.FC<PropsWithChildren<Props>> = ({
|
||
|
|
id,
|
||
|
|
children,
|
||
|
|
}) => {
|
||
|
|
const [visible, setVisible] = useState(!bannerSettings.get(id));
|
||
|
|
const intl = useIntl();
|
||
|
|
|
||
|
|
const handleDismiss = useCallback(() => {
|
||
|
|
setVisible(false);
|
||
|
|
bannerSettings.set(id, true);
|
||
|
|
}, [id]);
|
||
|
|
|
||
|
|
if (!visible) {
|
||
|
|
return null;
|
||
|
|
}
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className='dismissable-banner'>
|
||
|
|
<div className='dismissable-banner__message'>{children}</div>
|
||
|
|
|
||
|
|
<div className='dismissable-banner__action'>
|
||
|
|
<IconButton
|
||
|
|
icon='times'
|
||
|
|
title={intl.formatMessage(messages.dismiss)}
|
||
|
|
onClick={handleDismiss}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
};
|