diff --git a/frontend/src/screens/PodcastForm.tsx b/frontend/src/screens/PodcastForm.tsx index 6bf94460..a79fec64 100644 --- a/frontend/src/screens/PodcastForm.tsx +++ b/frontend/src/screens/PodcastForm.tsx @@ -28,6 +28,7 @@ import { ttsLanguageList } from '../helper/Utils'; const PodcastForm = ({navigation, route}: PodcastFormProp) => { + const MAX_TITLE_LENGTH = 100; const [title, setTitle] = useState(''); const [description, setDescription] = useState(''); const [selectedGenres, setSelectedGenres] = useState([]); @@ -264,8 +265,14 @@ const PodcastForm = ({navigation, route}: PodcastFormProp) => { placeholderTextColor="#6b7280" style={styles.inputControl} value={title} - onChangeText={setTitle} + maxLength={MAX_TITLE_LENGTH} + onChangeText={text => { + if (text.length <= MAX_TITLE_LENGTH) { + setTitle(text); + } + }} /> + = MAX_TITLE_LENGTH * 0.9 && styles.charCounterWarning, title.length >= MAX_TITLE_LENGTH && styles.charCounterError]}>{title.length} / {MAX_TITLE_LENGTH} {/* Language Dropdown */} @@ -519,6 +526,14 @@ const styles = StyleSheet.create({ fontSize: 13, fontWeight: '500', }, + charCounterWarning: { + color: '#FFA500', + fontWeight: '600', + }, + charCounterError: { + color: '#EF4444', + fontWeight: '700', + }, languageSelector: { height: 50, backgroundColor: '#fff',