[Glitch] Convert <DismissableBanner> to Typescript

Port 4534498a8e to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>

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

@@ -0,0 +1,47 @@
+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>
+  );
+};