Performance details screen (#34)

* Performance Details Screen

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 (
+    <View>
+      <Text style={styles.label}>Performance Type *</Text>
+      {options.map((option) => (
+        <TouchableOpacity
+          key={option.value}
+          style={styles.option}
+          onPress={() => onSelect(option.value)}
+        >
+          <View style={styles.radioCircle}>
+            {selectedOption === option.value && (
+              <View style={styles.selectedRb} />
+            )}
+          </View>
+          <Text
+            style={[
+              styles.optionText,
+              selectedOption === option.value && styles.selectedText,
+            ]}
+          >
+            {option.label}
+          </Text>
+        </TouchableOpacity>
+      ))}
+    </View>
+  );
+};
+
+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;

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 (
+    <ScrollView contentContainerStyle={styles.container}>
+      <MultipleChoice
+        options={performanceOptions}
+        selectedOption={performanceType}
+        onSelect={setPerformanceType}
+      />
+      <TextField
+        title="Length of Performance"
+        placeholder="Time Limit: X minutes"
+        value={timeLimit}
+        onChangeText={setTimeLimit}
+      />
+      <TextField
+        title="Recording Link"
+        placeholder="Share to YouTube / Google Drive"
+        value={recordingLink}
+        onChangeText={setRecordingLink}
+      />
+      <Button title="Next" onPress={() => {}} />
+    </ScrollView>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flexGrow: 1,
+    padding: 20,
+    backgroundColor: "#fff",
+  },
+});
+
+export default PerformanceDetailsScreen;