Add reaction indicator.

src/reactions/RaisedHandIndicator.tsx

@@ -11,6 +11,7 @@ import "@formatjs/intl-durationformat/polyfill";
 import { DurationFormat } from "@formatjs/intl-durationformat";
 
 import styles from "./RaisedHandIndicator.module.css";
+import { ReactionIndicator } from "./ReactionIndicator";
 
 const durationFormatter = new DurationFormat(undefined, {
   minutesDisplay: "always",
@@ -54,22 +55,9 @@ export function RaisedHandIndicator({
 
   if (raisedHandTime) {
     return (
-      <div
-        className={classNames(styles.raisedHandWidget, {
-          [styles.raisedHandWidgetLarge]: !minature,
-        })}
-      >
-        <div
-          className={classNames(styles.raisedHand, {
-            [styles.raisedHandLarge]: !minature,
-          })}
-        >
-          <span role="img" aria-label="raised hand">
-            ✋
-          </span>
-        </div>
+      <ReactionIndicator emoji="✋" minature={minature}>
         {showTimer && <p>{raisedHandDuration}</p>}
-      </div>
+      </ReactionIndicator>
     );
   }
 

src/reactions/ReactionIndicator.tsx

@@ -0,0 +1,40 @@
+/*
+Copyright 2024 New Vector Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only
+Please see LICENSE in the repository root for full details.
+*/
+
+import { PropsWithChildren, ReactNode } from "react";
+import classNames from "classnames";
+import "@formatjs/intl-durationformat/polyfill";
+
+import styles from "./RaisedHandIndicator.module.css";
+
+export function ReactionIndicator({
+  emoji,
+  minature,
+  children,
+}: PropsWithChildren<{
+  minature?: boolean;
+  emoji: string;
+}>): ReactNode {
+  return (
+    <div
+      className={classNames(styles.raisedHandWidget, {
+        [styles.raisedHandWidgetLarge]: !minature,
+      })}
+    >
+      <div
+        className={classNames(styles.raisedHand, {
+          [styles.raisedHandLarge]: !minature,
+        })}
+      >
+        <span role="img" aria-label="raised hand">
+          {emoji}
+        </span>
+      </div>
+      {children}
+    </div>
+  );
+}