refactor extra buttons, change text styling

my-app/src/Components/Buttons/ExtraCounter.tsx

@@ -0,0 +1,79 @@
+import { ReactNode, useRef, useState } from 'react';
+import styled from 'styled-components';
+
+export const StyledExtraCounterButton = styled.button`
+  position: relative;
+  flex-grow: 1;
+  border: none;
+  outline: none;
+  cursor: pointer;
+  background-color: transparent;
+  user-select: none;
+`;
+
+export const CenteredText = styled.div`
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  font-size: 5vh;
+  font-weight: bold;
+  text-shadow: -1px -1px 0 #ffffff, 1px -1px 0 #ffffff, -1px 1px 0 #ffffff,
+    1px 1px 0 #ffffff;
+  color: #000000;
+`;
+
+type ExtraCounterProps = {
+  Icon: ReactNode;
+};
+
+const ExtraCounter = ({ Icon }: ExtraCounterProps) => {
+  const [count, setCount] = useState(0);
+  const timeoutRef = useRef<NodeJS.Timeout | undefined>(undefined);
+  const [timeoutFinished, setTimeoutFinished] = useState(false);
+  const [hasPressedDown, setHasPressedDown] = useState(false);
+
+  const handleCountChange = (increment: number) => {
+    setCount(count + increment);
+  };
+
+  const handleDownInput = () => {
+    setTimeoutFinished(false);
+    setHasPressedDown(true);
+    timeoutRef.current = setTimeout(() => {
+      setTimeoutFinished(true);
+      handleCountChange(-1);
+    }, 500);
+  };
+
+  const handleUpInput = () => {
+    if (!(hasPressedDown && !timeoutFinished)) {
+      return;
+    }
+    clearTimeout(timeoutRef.current);
+    handleCountChange(1);
+    setHasPressedDown(false);
+  };
+
+  const handleLeaveInput = () => {
+    setTimeoutFinished(true);
+    clearTimeout(timeoutRef.current);
+    setHasPressedDown(false);
+  };
+
+  return (
+    <StyledExtraCounterButton
+      onPointerDown={handleDownInput}
+      onPointerUp={handleUpInput}
+      onPointerLeave={handleLeaveInput}
+      onContextMenu={(e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
+        e.preventDefault();
+      }}
+    >
+      {Icon}
+      <CenteredText>{count ? count : undefined}</CenteredText>
+    </StyledExtraCounterButton>
+  );
+};
+
+export default ExtraCounter;