this repo has no description
hailey.at
1import { PropsWithChildren, useState } from 'react';
2import { StyleSheet, TouchableOpacity } from 'react-native';
3
4import { ThemedText } from '@/components/ThemedText';
5import { ThemedView } from '@/components/ThemedView';
6import { IconSymbol } from '@/components/ui/IconSymbol';
7import { Colors } from '@/constants/Colors';
8import { useColorScheme } from '@/hooks/useColorScheme';
9
10export function Collapsible({ children, title }: PropsWithChildren & { title: string }) {
11 const [isOpen, setIsOpen] = useState(false);
12 const theme = useColorScheme() ?? 'light';
13
14 return (
15 <ThemedView>
16 <TouchableOpacity
17 style={styles.heading}
18 onPress={() => setIsOpen((value) => !value)}
19 activeOpacity={0.8}>
20 <IconSymbol
21 name="chevron.right"
22 size={18}
23 weight="medium"
24 color={theme === 'light' ? Colors.light.icon : Colors.dark.icon}
25 style={{ transform: [{ rotate: isOpen ? '90deg' : '0deg' }] }}
26 />
27
28 <ThemedText type="defaultSemiBold">{title}</ThemedText>
29 </TouchableOpacity>
30 {isOpen && <ThemedView style={styles.content}>{children}</ThemedView>}
31 </ThemedView>
32 );
33}
34
35const styles = StyleSheet.create({
36 heading: {
37 flexDirection: 'row',
38 alignItems: 'center',
39 gap: 6,
40 },
41 content: {
42 marginTop: 6,
43 marginLeft: 24,
44 },
45});