refactor: extract reusable components

apps/client/src/common/components/delay-indicator/DelayIndicator.module.scss

@@ -0,0 +1,9 @@
+@use '../../../theme/v2Styles' as *;
+
+.delaySymbol {
+  svg {
+    font-size: 1.5rem;
+    color: $ontime-delay;
+    margin: 0 auto;
+  }
+}

apps/client/src/common/components/delay-indicator/DelayIndicator.tsx

@@ -0,0 +1,36 @@
+import { Tooltip } from '@chakra-ui/react';
+import { IoChevronDown } from '@react-icons/all-files/io5/IoChevronDown';
+import { IoChevronUp } from '@react-icons/all-files/io5/IoChevronUp';
+
+import { tooltipDelayFast } from '../../../ontimeConfig';
+import { millisToDelayString } from '../../utils/dateConfig';
+
+import style from './DelayIndicator.module.scss';
+
+export default function DelayIndicator(props: { delayValue?: number }) {
+  const { delayValue } = props;
+
+  if (typeof delayValue === 'number') {
+    if (delayValue < 0) {
+      return (
+        <Tooltip openDelay={tooltipDelayFast} label={millisToDelayString(delayValue)}>
+          <span className={style.delaySymbol}>
+            <IoChevronDown />
+          </span>
+        </Tooltip>
+      );
+    }
+
+    if (delayValue > 0) {
+      return (
+        <Tooltip openDelay={tooltipDelayFast} label={millisToDelayString(delayValue)}>
+          <span className={style.delaySymbol}>
+            <IoChevronUp />
+          </span>
+        </Tooltip>
+      );
+    }
+  }
+
+  return null;
+}

apps/client/src/features/cuesheet/Cuesheet.module.scss

@@ -113,14 +113,6 @@ $table-header-font-size: calc(1rem - 3px);
   }
 }
 
-.delaySymbol {
-  svg {
-    font-size: 1.5rem;
-    color: $ontime-delay;
-    margin: 0 auto;
-  }
-}
-
 .delayedTime {
   color: $ontime-delay-text;
   font-size: calc(1rem - 2px);

apps/client/src/features/cuesheet/cuesheet-table-header/CuesheetTableHeader.tsx

@@ -6,13 +6,13 @@ import { IoSettingsOutline } from '@react-icons/all-files/io5/IoSettingsOutline'
 import { EventData, Playback } from 'ontime-types';
 import { formatDisplay } from 'ontime-utils';
 
+import PlaybackIcon from '../../../common/components/playback-icon/PlaybackIcon';
 import useFullscreen from '../../../common/hooks/useFullscreen';
 import { useTimer } from '../../../common/hooks/useSocket';
 import useEventData from '../../../common/hooks-query/useEventData';
 import { formatTime } from '../../../common/utils/time';
 import { tooltipDelayFast } from '../../../ontimeConfig';
 import { useCuesheetSettings } from '../store/CuesheetSettings';
-import PlaybackIcon from '../tableElements/PlaybackIcon';
 
 import style from './CuesheetTableHeader.module.scss';
 

apps/client/src/features/cuesheet/cuesheetCols.tsx

@@ -1,14 +1,10 @@
 import { useCallback } from 'react';
-import { Tooltip } from '@chakra-ui/react';
 import { IoCheckmark } from '@react-icons/all-files/io5/IoCheckmark';
-import { IoChevronDown } from '@react-icons/all-files/io5/IoChevronDown';
-import { IoChevronUp } from '@react-icons/all-files/io5/IoChevronUp';
 import { CellContext, ColumnDef } from '@tanstack/react-table';
 import { OntimeEvent, OntimeRundownEntry, UserFields } from 'ontime-types';
 import { millisToString } from 'ontime-utils';
 
-import { millisToDelayString } from '../../common/utils/dateConfig';
-import { tooltipDelayFast } from '../../ontimeConfig';
+import DelayIndicator from '../../common/components/delay-indicator/DelayIndicator';
 
 import { useCuesheetSettings } from './store/CuesheetSettings';
 import EditableCell from './tableElements/EditableCell';
@@ -20,30 +16,6 @@ function makePublic(row: CellContext<OntimeRundownEntry, unknown>) {
   return cellValue ? <IoCheckmark className={style.check} /> : '';
 }
 
-function DelayIndicator(props: { delayValue: number }) {
-  const { delayValue } = props;
-  if (delayValue < 0) {
-    return (
-      <Tooltip openDelay={tooltipDelayFast} label={millisToDelayString(delayValue)}>
-        <span className={style.delaySymbol}>
-          <IoChevronDown />
-        </span>
-      </Tooltip>
-    );
-  }
-
-  if (delayValue > 0) {
-    return (
-      <Tooltip openDelay={tooltipDelayFast} label={millisToDelayString(delayValue)}>
-        <span className={style.delaySymbol}>
-          <IoChevronUp />
-        </span>
-      </Tooltip>
-    );
-  }
-  return null;
-}
-
 function MakeTimer({ getValue, row: { original } }: CellContext<OntimeRundownEntry, unknown>) {
   const showDelayedTimes = useCuesheetSettings((state) => state.showDelayedTimes);
   const cellValue = (getValue() as number | null) ?? 0;