Add Collapsible Sections

components/common/Section.tsx

@@ -1,17 +1,44 @@
-import {PropsWithChildren} from 'react';
-import {Dimensions, StyleSheet, Text, View} from 'react-native';
+import {PropsWithChildren, useState} from 'react';
+import {
+  Dimensions,
+  StyleSheet,
+  Text,
+  Touchable,
+  TouchableOpacity,
+  View,
+} from 'react-native';
 import {Colors} from 'react-native/Libraries/NewAppScreen';
 import {styles} from './styles';
 
 type SectionProps = PropsWithChildren<{
   title: string;
+  collapsible?: boolean;
 }>;
 
-export function Section({children, title}: SectionProps): React.JSX.Element {
+export function Section({
+  children,
+  title,
+  collapsible,
+}: SectionProps): React.JSX.Element {
+  const [collapsed, setCollapsed] = useState(true);
+
   return (
     <View style={styles.sectionContainer}>
-      <Text style={styles.sectionTitle}>{title}</Text>
-      <Text style={[styles.sectionDescription]}>{children}</Text>
+      {collapsible ? (
+        <TouchableOpacity
+          onPress={() => {
+            setCollapsed(!collapsed);
+          }}>
+          <Text style={styles.sectionTitle}>
+            {title} {collapsed ? '→' : '↓'}
+          </Text>
+        </TouchableOpacity>
+      ) : (
+        <Text style={styles.sectionTitle}>{title}</Text>
+      )}
+      {!collapsible || !collapsed ? (
+        <Text style={[styles.sectionDescription]}>{children}</Text>
+      ) : null}
     </View>
   );
 }