diff --git a/src/reactions/RaisedHandIndicator.module.css b/src/reactions/RaisedHandIndicator.module.css
new file mode 100644
index 00000000..b5dd6e49
--- /dev/null
+++ b/src/reactions/RaisedHandIndicator.module.css
@@ -0,0 +1,39 @@
+.raisedHandWidget {
+ display: flex;
+ background-color: var(--cpd-color-bg-subtle-primary);
+ border-radius: var(--cpd-radius-pill-effect);
+ color: var(--cpd-color-icon-secondary);
+ border: 1px solid var(--cpd-color-yellow-1200);
+}
+
+.raisedHandWidget > p {
+ padding: var(--cpd-space-2x);
+ margin-top: auto;
+ margin-bottom: auto;
+ width: 4em;
+}
+
+.raisedHand {
+ margin: var(--cpd-space-2x);
+ padding: var(--cpd-space-2x);
+ padding-block: var(--cpd-space-2x);
+ color: var(--cpd-color-icon-secondary);
+ background-color: var(--cpd-color-icon-secondary);
+ display: flex;
+ align-items: center;
+ border-radius: var(--cpd-radius-pill-effect);
+ user-select: none;
+ overflow: hidden;
+ box-shadow: var(--small-drop-shadow);
+ box-sizing: border-box;
+ max-inline-size: 100%;
+ max-width: fit-content;
+}
+
+.raisedHand > span {
+ width: var(--cpd-space-8x);
+ height: var(--cpd-space-8x);
+ display: inline-block;
+ text-align: center;
+ font-size: 22px;
+}
diff --git a/src/reactions/RaisedHandIndicator.test.tsx b/src/reactions/RaisedHandIndicator.test.tsx
new file mode 100644
index 00000000..8463a625
--- /dev/null
+++ b/src/reactions/RaisedHandIndicator.test.tsx
@@ -0,0 +1,36 @@
+/*
+Copyright 2024 New Vector Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only
+Please see LICENSE in the repository root for full details.
+*/
+
+import { describe, expect, test } from "vitest";
+import { render, configure } from "@testing-library/react";
+
+import { RaisedHandIndicator } from "./RaisedHandIndicator";
+
+configure({
+ defaultHidden: true,
+});
+
+describe("RaisedHandIndicator", () => {
+ test("renders nothing when no hand has been raised", async () => {
+ const { container } = render();
+ expect(container.firstChild).toBeNull();
+ });
+ test("renders an indicator when a hand has been raised", async () => {
+ const dateTime = new Date();
+ const { container } = render(
+ ,
+ );
+ expect(container.firstChild).toMatchSnapshot();
+ });
+ test("renders an indicator when a hand has been raised with the expected time", async () => {
+ const dateTime = new Date(new Date().getTime() - 60000);
+ const { container } = render(
+ ,
+ );
+ expect(container.firstChild).toMatchSnapshot();
+ });
+});
diff --git a/src/reactions/RaisedHandIndicator.tsx b/src/reactions/RaisedHandIndicator.tsx
new file mode 100644
index 00000000..012fa571
--- /dev/null
+++ b/src/reactions/RaisedHandIndicator.tsx
@@ -0,0 +1,44 @@
+import { useEffect, useState } from "react";
+import styles from "./RaisedHandIndicator.module.css";
+
+export function RaisedHandIndicator({
+ raisedHandTime,
+}: {
+ raisedHandTime?: Date;
+}) {
+ const [raisedHandDuration, setRaisedHandDuration] = useState("");
+
+ useEffect(() => {
+ if (!raisedHandTime) {
+ return;
+ }
+ const calculateTime = () => {
+ const totalSeconds = Math.ceil(
+ (new Date().getTime() - raisedHandTime.getTime()) / 1000,
+ );
+ const seconds = totalSeconds % 60;
+ const minutes = Math.floor(totalSeconds / 60);
+ setRaisedHandDuration(
+ `${minutes < 10 ? "0" : ""}${minutes}:${seconds < 10 ? "0" : ""}${seconds}`,
+ );
+ };
+ const to = setInterval(calculateTime, 1000);
+ calculateTime();
+ return (): void => clearInterval(to);
+ }, [setRaisedHandDuration, raisedHandTime]);
+
+ if (raisedHandTime) {
+ return (
+
+
+
+ ✋
+
+
+
{raisedHandDuration}
+
- {raisedHandTime && (
-
-
-
- ✋
-
-
-
{raisedHandDuration}
-
- )}
+
{nameTagLeadingIcon}