8e902fd9c1
Adds a new `ReaderSettings` type to manage user preferences such as dark mode, font size, line height, font family, and auto-scroll behavior. Implements dark mode styling for various UI components including the `VoiceSelector` and `QueueItem`, enhancing visual consistency. Enhances the `ReaderView` component to respect the `autoScroll` setting and introduces basic text styling options based on the new settings.
32 lines
1.1 KiB
TypeScript
32 lines
1.1 KiB
TypeScript
|
|
import React from 'react';
|
|
import { VoiceName } from '../types';
|
|
import { AVAILABLE_VOICES } from '../constants';
|
|
import { Mic } from 'lucide-react';
|
|
|
|
interface VoiceSelectorProps {
|
|
selectedVoice: VoiceName;
|
|
onVoiceChange: (voice: VoiceName) => void;
|
|
disabled?: boolean;
|
|
}
|
|
|
|
export const VoiceSelector: React.FC<VoiceSelectorProps> = ({ selectedVoice, onVoiceChange, disabled }) => {
|
|
return (
|
|
<div className="flex items-center space-x-2">
|
|
<Mic className="w-4 h-4 text-slate-500 dark:text-slate-400" />
|
|
<select
|
|
value={selectedVoice}
|
|
onChange={(e) => onVoiceChange(e.target.value as VoiceName)}
|
|
disabled={disabled}
|
|
className="bg-white dark:bg-slate-800 border border-slate-300 dark:border-slate-700 text-slate-700 dark:text-slate-200 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 disabled:opacity-50 disabled:cursor-not-allowed transition-colors duration-300"
|
|
>
|
|
{AVAILABLE_VOICES.map((v) => (
|
|
<option key={v.name} value={v.name}>
|
|
{v.label}
|
|
</option>
|
|
))}
|
|
</select>
|
|
</div>
|
|
);
|
|
};
|