YuruToot/app/javascript/flavours/glitch/components/dismissable_banner.tsx

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__action'>
        <IconButton
          icon='times'
          title={intl.formatMessage(messages.dismiss)}
          onClick={handleDismiss}
        />
      </div>

      <div className='dismissable-banner__message'>{children}</div>
    </div>
  );
};