Further Refactoring of the Settings

app/components/settings/FontSize.tsx

@@ -0,0 +1,31 @@
+// FontSizeSetting.tsx
+import React from 'react';
+
+interface FontSizeSettingProps {
+  fontSize: string; // The current font size
+  setFontSize: (newSize: string) => void; // Function to update the font size
+}
+
+const FontSizeSetting: React.FC<FontSizeSettingProps> = ({ fontSize, setFontSize }) => {
+  const handleFontSizeChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const newSize = `${e.target.value}px`;
+    setFontSize(newSize);
+    document.documentElement.style.setProperty('--font-size', newSize);
+  };
+
+  return (
+    <div className="settings-option">
+      <p>Font Size</p>
+      <input
+        type="range"
+        min="12"
+        max="30"
+        value={parseInt(fontSize, 10)} // Ensure value is a number
+        onChange={handleFontSizeChange}
+      />
+      <span>{fontSize}</span>
+    </div>
+  );
+};
+
+export default FontSizeSetting;