diff --git a/src/components/MultipleChoice.js b/src/components/MultipleChoice.js new file mode 100644 index 0000000..69f6344 --- /dev/null +++ b/src/components/MultipleChoice.js @@ -0,0 +1,70 @@ +// MultipleChoice.js +import React from "react"; +import { View, Text, TouchableOpacity, StyleSheet } from "react-native"; + +const MultipleChoice = ({ options, selectedOption, onSelect }) => { + return ( + + Performance Type * + {options.map((option) => ( + onSelect(option.value)} + > + + {selectedOption === option.value && ( + + )} + + + {option.label} + + + ))} + + ); +}; + +const styles = StyleSheet.create({ + label: { + fontSize: 16, + marginVertical: 10, + fontWeight: "bold", + }, + option: { + flexDirection: "row", + alignItems: "center", + marginVertical: 5, + }, + radioCircle: { + height: 20, + width: 20, + borderRadius: 10, + borderWidth: 2, + borderColor: "#444", + alignItems: "center", + justifyContent: "center", + }, + selectedRb: { + width: 10, + height: 10, + borderRadius: 5, + backgroundColor: "#444", + }, + optionText: { + marginLeft: 10, + fontSize: 14, + }, + selectedText: { + color: "#1E90FF", + fontWeight: "bold", + }, +}); + +export default MultipleChoice; diff --git a/src/screens/PerformanceDetailsScreen.js b/src/screens/PerformanceDetailsScreen.js new file mode 100644 index 0000000..3d9b3c5 --- /dev/null +++ b/src/screens/PerformanceDetailsScreen.js @@ -0,0 +1,61 @@ +// PerformanceDetailsScreen.js +import React, { useState } from "react"; +import { View, StyleSheet, ScrollView, Button } from "react-native"; +import MultipleChoice from "../components/MultipleChoice"; +import TextField from "../components/TextField"; + +const PerformanceDetailsScreen = () => { + const [performanceType, setPerformanceType] = useState("individual"); + const [timeLimit, setTimeLimit] = useState(""); + const [recordingLink, setRecordingLink] = useState(""); + + const performanceOptions = [ + { label: "Individual performance only", value: "individual" }, + { + label: "Individual performance and music instrument presentation", + value: "individualPresentation", + }, + { label: "Group performance only", value: "group" }, + { + label: "Group performance and music instrument presentation", + value: "groupPresentation", + }, + { + label: "Library Band Ensemble (Band, Orchestra, or Choir)", + value: "library", + }, + ]; + + return ( + + + + +