refactor: Convert _RangeTitle.jsx to TypeScript and update related im…

…ports

frontend/src/components/Question/_RangeTitle.tsx

@@ -0,0 +1,34 @@
+import { renderLabel } from "../../util/label";
+import Question from "@/types/Question";
+
+interface RangeTitleProps {
+    question: Question;
+    value: string;
+    sliderValue: number;
+    emptyValue: boolean;
+    changePosition?: boolean;
+}
+
+const RangeTitle = ({ question, value, sliderValue, emptyValue, changePosition = false }: RangeTitleProps) => {
+
+    if (!question.choices || Object.keys(question.choices).length === 0) {
+        throw new Error("RangeTitle question must have choices");
+    }
+
+    const nChoices = Object.keys(question.choices).length - 1;
+    const position = - (nChoices - sliderValue * 2) / nChoices * 44;
+    return (
+        <div>
+            <h4 className="current-value" style={{ position: 'relative', left: changePosition ? `${position}%` : '0%' }}>
+                {emptyValue ? (
+                    renderLabel("fa-arrows-left-right", "fa-2x")
+                ) : (
+                    <span className={`is-${value}`}> {renderLabel(question.choices[value], "fa-2x")}</span>
+                )
+                }
+            </h4>
+        </div>
+    )
+}
+
+export default RangeTitle;

frontend/src/util/label.jsx → frontend/src/util/label.tsx

@@ -1,4 +1,4 @@
-export const renderLabel = (label, size="fa-lg") => {
+export const renderLabel = (label: string, size = "fa-lg") => {
     if (!label) return label
     if (label.startsWith('fa-')) return <span className={`fa-solid ${label} ${size}`}></span>
     else return label