forked from React-Group/interstellar_ai
32 lines
861 B
TypeScript
32 lines
861 B
TypeScript
|
// 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;
|