feat(native): help section — FAQ, Contact, About, Crisis pages
New route group app/help/ with 4 sub-pages navigable from settings. - help/faq.tsx: accordion with 8 Q&As (drafted by UI agent, see below) - help/contact.tsx: mailto:hilfe@rebreak.org with prefilled subject, address block (Rebreak placeholder — TODO verify legal entity name) - help/about.tsx: mission text + 3 fact rows (DiGA, Hetzner, DSGVO) - help/crisis.tsx: BZgA 0800 1 372 700, check-dein-spiel.de, anonyme-spieler.org, Telefonseelsorge 0800 111 0 111, emergency 112-box with error-color border treatment. Disclaimer at bottom. All pages use AppHeader showBack for correct back-button. All strings in help.* namespace in DE/EN/FR locales. FAQ answers drafted by UI agent — pending lyra-persona tone review: faq_a1 (what is Rebreak), faq_a2 (blocker), faq_a3 (Mac DNS), faq_a4 (cancel sub), faq_a5 (data), faq_a6 (bug report), faq_a7 (whitelist), faq_a8 (DiGA). FR locale: faq answers are DE-fallback text (TODO: translate properly). Contact address block: placeholder — TODO confirm legal entity + address. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
chahinebrini
parent
943afb827b
commit
d840247c98
18
apps/rebreak-native/app/help/_layout.tsx
Normal file
18
apps/rebreak-native/app/help/_layout.tsx
Normal file
@ -0,0 +1,18 @@
|
|||||||
|
import { Stack } from 'expo-router';
|
||||||
|
import { useTranslation } from 'react-i18next';
|
||||||
|
import { useColors } from '../../lib/theme';
|
||||||
|
|
||||||
|
export default function HelpLayout() {
|
||||||
|
const { t } = useTranslation();
|
||||||
|
const colors = useColors();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Stack
|
||||||
|
screenOptions={{
|
||||||
|
headerShown: false,
|
||||||
|
animation: 'slide_from_right',
|
||||||
|
contentStyle: { backgroundColor: colors.groupedBg },
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
137
apps/rebreak-native/app/help/about.tsx
Normal file
137
apps/rebreak-native/app/help/about.tsx
Normal file
@ -0,0 +1,137 @@
|
|||||||
|
import { Linking, ScrollView, Text, TouchableOpacity, View } from 'react-native';
|
||||||
|
import { useSafeAreaInsets } from 'react-native-safe-area-context';
|
||||||
|
import { Ionicons } from '@expo/vector-icons';
|
||||||
|
import { useTranslation } from 'react-i18next';
|
||||||
|
import { useColors } from '../../lib/theme';
|
||||||
|
import { AppHeader } from '../../components/AppHeader';
|
||||||
|
|
||||||
|
export default function AboutScreen() {
|
||||||
|
const { t } = useTranslation();
|
||||||
|
const colors = useColors();
|
||||||
|
const insets = useSafeAreaInsets();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<View style={{ flex: 1, backgroundColor: colors.groupedBg }}>
|
||||||
|
<AppHeader showBack title={t('help.about_title')} />
|
||||||
|
|
||||||
|
<ScrollView
|
||||||
|
style={{ flex: 1 }}
|
||||||
|
contentContainerStyle={{
|
||||||
|
paddingHorizontal: 16,
|
||||||
|
paddingTop: 20,
|
||||||
|
paddingBottom: insets.bottom + 40,
|
||||||
|
}}
|
||||||
|
showsVerticalScrollIndicator={false}
|
||||||
|
>
|
||||||
|
<View
|
||||||
|
style={{
|
||||||
|
backgroundColor: colors.card,
|
||||||
|
borderRadius: 14,
|
||||||
|
padding: 16,
|
||||||
|
marginBottom: 16,
|
||||||
|
shadowColor: '#000',
|
||||||
|
shadowOffset: { width: 0, height: 1 },
|
||||||
|
shadowOpacity: 0.04,
|
||||||
|
shadowRadius: 3,
|
||||||
|
elevation: 1,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Text
|
||||||
|
style={{
|
||||||
|
fontSize: 22,
|
||||||
|
fontFamily: 'Nunito_800ExtraBold',
|
||||||
|
color: colors.text,
|
||||||
|
marginBottom: 12,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{t('help.about_headline')}
|
||||||
|
</Text>
|
||||||
|
<Text
|
||||||
|
style={{
|
||||||
|
fontSize: 15,
|
||||||
|
fontFamily: 'Nunito_400Regular',
|
||||||
|
color: colors.text,
|
||||||
|
lineHeight: 24,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{t('help.about_body')}
|
||||||
|
</Text>
|
||||||
|
</View>
|
||||||
|
|
||||||
|
<View
|
||||||
|
style={{
|
||||||
|
backgroundColor: colors.card,
|
||||||
|
borderRadius: 14,
|
||||||
|
overflow: 'hidden',
|
||||||
|
shadowColor: '#000',
|
||||||
|
shadowOffset: { width: 0, height: 1 },
|
||||||
|
shadowOpacity: 0.04,
|
||||||
|
shadowRadius: 3,
|
||||||
|
elevation: 1,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{(
|
||||||
|
[
|
||||||
|
{ icon: 'shield-checkmark-outline', label: t('help.about_fact_diga') },
|
||||||
|
{ icon: 'server-outline', label: t('help.about_fact_servers') },
|
||||||
|
{ icon: 'lock-closed-outline', label: t('help.about_fact_privacy') },
|
||||||
|
] as { icon: React.ComponentProps<typeof Ionicons>['name']; label: string }[]
|
||||||
|
).map((item, i, arr) => (
|
||||||
|
<View
|
||||||
|
key={item.icon}
|
||||||
|
style={{
|
||||||
|
flexDirection: 'row',
|
||||||
|
alignItems: 'center',
|
||||||
|
gap: 14,
|
||||||
|
paddingHorizontal: 16,
|
||||||
|
paddingVertical: 14,
|
||||||
|
borderBottomWidth: i < arr.length - 1 ? 1 : 0,
|
||||||
|
borderBottomColor: colors.border,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<View
|
||||||
|
style={{
|
||||||
|
width: 34,
|
||||||
|
height: 34,
|
||||||
|
borderRadius: 10,
|
||||||
|
backgroundColor: colors.surfaceElevated,
|
||||||
|
alignItems: 'center',
|
||||||
|
justifyContent: 'center',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Ionicons name={item.icon} size={17} color={colors.textMuted} />
|
||||||
|
</View>
|
||||||
|
<Text
|
||||||
|
style={{
|
||||||
|
flex: 1,
|
||||||
|
fontSize: 14,
|
||||||
|
fontFamily: 'Nunito_400Regular',
|
||||||
|
color: colors.text,
|
||||||
|
lineHeight: 20,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{item.label}
|
||||||
|
</Text>
|
||||||
|
</View>
|
||||||
|
))}
|
||||||
|
</View>
|
||||||
|
|
||||||
|
<TouchableOpacity
|
||||||
|
onPress={() => Linking.openURL('https://rebreak.org')}
|
||||||
|
activeOpacity={0.7}
|
||||||
|
style={{ marginTop: 20, alignItems: 'center' }}
|
||||||
|
>
|
||||||
|
<Text
|
||||||
|
style={{
|
||||||
|
fontSize: 13,
|
||||||
|
fontFamily: 'Nunito_400Regular',
|
||||||
|
color: '#6366f1',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
rebreak.org
|
||||||
|
</Text>
|
||||||
|
</TouchableOpacity>
|
||||||
|
</ScrollView>
|
||||||
|
</View>
|
||||||
|
);
|
||||||
|
}
|
||||||
107
apps/rebreak-native/app/help/contact.tsx
Normal file
107
apps/rebreak-native/app/help/contact.tsx
Normal file
@ -0,0 +1,107 @@
|
|||||||
|
import { Linking, ScrollView, Text, View } from 'react-native';
|
||||||
|
import { useSafeAreaInsets } from 'react-native-safe-area-context';
|
||||||
|
import { useTranslation } from 'react-i18next';
|
||||||
|
import { useColors } from '../../lib/theme';
|
||||||
|
import { AppHeader } from '../../components/AppHeader';
|
||||||
|
import { Button } from '../../components/Button';
|
||||||
|
|
||||||
|
export default function ContactScreen() {
|
||||||
|
const { t } = useTranslation();
|
||||||
|
const colors = useColors();
|
||||||
|
const insets = useSafeAreaInsets();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<View style={{ flex: 1, backgroundColor: colors.groupedBg }}>
|
||||||
|
<AppHeader showBack title={t('help.contact_title')} />
|
||||||
|
|
||||||
|
<ScrollView
|
||||||
|
style={{ flex: 1 }}
|
||||||
|
contentContainerStyle={{
|
||||||
|
paddingHorizontal: 16,
|
||||||
|
paddingTop: 20,
|
||||||
|
paddingBottom: insets.bottom + 40,
|
||||||
|
}}
|
||||||
|
showsVerticalScrollIndicator={false}
|
||||||
|
>
|
||||||
|
<View
|
||||||
|
style={{
|
||||||
|
backgroundColor: colors.card,
|
||||||
|
borderRadius: 14,
|
||||||
|
padding: 16,
|
||||||
|
marginBottom: 16,
|
||||||
|
shadowColor: '#000',
|
||||||
|
shadowOffset: { width: 0, height: 1 },
|
||||||
|
shadowOpacity: 0.04,
|
||||||
|
shadowRadius: 3,
|
||||||
|
elevation: 1,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Text
|
||||||
|
style={{
|
||||||
|
fontSize: 15,
|
||||||
|
fontFamily: 'Nunito_700Bold',
|
||||||
|
color: colors.text,
|
||||||
|
marginBottom: 8,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{t('help.contact_email_label')}
|
||||||
|
</Text>
|
||||||
|
<Text
|
||||||
|
style={{
|
||||||
|
fontSize: 14,
|
||||||
|
fontFamily: 'Nunito_400Regular',
|
||||||
|
color: colors.textMuted,
|
||||||
|
lineHeight: 21,
|
||||||
|
marginBottom: 16,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{t('help.contact_email_desc')}
|
||||||
|
</Text>
|
||||||
|
<Button
|
||||||
|
title={t('help.contact_email_cta')}
|
||||||
|
onPress={() =>
|
||||||
|
Linking.openURL(
|
||||||
|
'mailto:hilfe@rebreak.org?subject=Support%20Anfrage',
|
||||||
|
)
|
||||||
|
}
|
||||||
|
size="md"
|
||||||
|
/>
|
||||||
|
</View>
|
||||||
|
|
||||||
|
<View
|
||||||
|
style={{
|
||||||
|
backgroundColor: colors.card,
|
||||||
|
borderRadius: 14,
|
||||||
|
padding: 16,
|
||||||
|
shadowColor: '#000',
|
||||||
|
shadowOffset: { width: 0, height: 1 },
|
||||||
|
shadowOpacity: 0.04,
|
||||||
|
shadowRadius: 3,
|
||||||
|
elevation: 1,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Text
|
||||||
|
style={{
|
||||||
|
fontSize: 15,
|
||||||
|
fontFamily: 'Nunito_700Bold',
|
||||||
|
color: colors.text,
|
||||||
|
marginBottom: 8,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{t('help.contact_address_label')}
|
||||||
|
</Text>
|
||||||
|
<Text
|
||||||
|
style={{
|
||||||
|
fontSize: 14,
|
||||||
|
fontFamily: 'Nunito_400Regular',
|
||||||
|
color: colors.textMuted,
|
||||||
|
lineHeight: 22,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{t('help.contact_address_block')}
|
||||||
|
</Text>
|
||||||
|
</View>
|
||||||
|
</ScrollView>
|
||||||
|
</View>
|
||||||
|
);
|
||||||
|
}
|
||||||
250
apps/rebreak-native/app/help/crisis.tsx
Normal file
250
apps/rebreak-native/app/help/crisis.tsx
Normal file
@ -0,0 +1,250 @@
|
|||||||
|
import { Linking, ScrollView, Text, TouchableOpacity, View } from 'react-native';
|
||||||
|
import { useSafeAreaInsets } from 'react-native-safe-area-context';
|
||||||
|
import { Ionicons } from '@expo/vector-icons';
|
||||||
|
import { useTranslation } from 'react-i18next';
|
||||||
|
import { useColors } from '../../lib/theme';
|
||||||
|
import { AppHeader } from '../../components/AppHeader';
|
||||||
|
|
||||||
|
type HotlineRowProps = {
|
||||||
|
label: string;
|
||||||
|
sublabel: string;
|
||||||
|
phoneOrUrl: string;
|
||||||
|
isUrl?: boolean;
|
||||||
|
colors: ReturnType<typeof useColors>;
|
||||||
|
};
|
||||||
|
|
||||||
|
function HotlineRow({ label, sublabel, phoneOrUrl, isUrl, colors }: HotlineRowProps) {
|
||||||
|
return (
|
||||||
|
<TouchableOpacity
|
||||||
|
onPress={() => Linking.openURL(isUrl ? phoneOrUrl : `tel:${phoneOrUrl.replace(/\s/g, '')}`)}
|
||||||
|
activeOpacity={0.7}
|
||||||
|
>
|
||||||
|
<View
|
||||||
|
style={{
|
||||||
|
flexDirection: 'row',
|
||||||
|
alignItems: 'center',
|
||||||
|
gap: 12,
|
||||||
|
paddingHorizontal: 16,
|
||||||
|
paddingVertical: 14,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<View
|
||||||
|
style={{
|
||||||
|
width: 34,
|
||||||
|
height: 34,
|
||||||
|
borderRadius: 10,
|
||||||
|
backgroundColor: colors.surfaceElevated,
|
||||||
|
alignItems: 'center',
|
||||||
|
justifyContent: 'center',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Ionicons
|
||||||
|
name={isUrl ? 'globe-outline' : 'call-outline'}
|
||||||
|
size={17}
|
||||||
|
color={colors.textMuted}
|
||||||
|
/>
|
||||||
|
</View>
|
||||||
|
<View style={{ flex: 1 }}>
|
||||||
|
<Text
|
||||||
|
style={{
|
||||||
|
fontSize: 15,
|
||||||
|
fontFamily: 'Nunito_600SemiBold',
|
||||||
|
color: colors.text,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{label}
|
||||||
|
</Text>
|
||||||
|
<Text
|
||||||
|
style={{
|
||||||
|
fontSize: 12,
|
||||||
|
fontFamily: 'Nunito_400Regular',
|
||||||
|
color: colors.textMuted,
|
||||||
|
marginTop: 2,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{sublabel}
|
||||||
|
</Text>
|
||||||
|
</View>
|
||||||
|
<Ionicons name="chevron-forward" size={16} color={colors.border} />
|
||||||
|
</View>
|
||||||
|
</TouchableOpacity>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function CrisisScreen() {
|
||||||
|
const { t } = useTranslation();
|
||||||
|
const colors = useColors();
|
||||||
|
const insets = useSafeAreaInsets();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<View style={{ flex: 1, backgroundColor: colors.groupedBg }}>
|
||||||
|
<AppHeader showBack title={t('help.crisis_title')} />
|
||||||
|
|
||||||
|
<ScrollView
|
||||||
|
style={{ flex: 1 }}
|
||||||
|
contentContainerStyle={{
|
||||||
|
paddingHorizontal: 16,
|
||||||
|
paddingTop: 20,
|
||||||
|
paddingBottom: insets.bottom + 40,
|
||||||
|
}}
|
||||||
|
showsVerticalScrollIndicator={false}
|
||||||
|
>
|
||||||
|
<Text
|
||||||
|
style={{
|
||||||
|
fontSize: 13,
|
||||||
|
fontFamily: 'Nunito_600SemiBold',
|
||||||
|
color: colors.textMuted,
|
||||||
|
textTransform: 'uppercase',
|
||||||
|
letterSpacing: 1,
|
||||||
|
marginBottom: 8,
|
||||||
|
marginLeft: 4,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{t('help.crisis_section_gambling')}
|
||||||
|
</Text>
|
||||||
|
|
||||||
|
<View
|
||||||
|
style={{
|
||||||
|
backgroundColor: colors.card,
|
||||||
|
borderRadius: 14,
|
||||||
|
overflow: 'hidden',
|
||||||
|
marginBottom: 20,
|
||||||
|
shadowColor: '#000',
|
||||||
|
shadowOffset: { width: 0, height: 1 },
|
||||||
|
shadowOpacity: 0.04,
|
||||||
|
shadowRadius: 3,
|
||||||
|
elevation: 1,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<View style={{ borderBottomWidth: 1, borderBottomColor: colors.border }}>
|
||||||
|
<HotlineRow
|
||||||
|
label={t('help.crisis_bzga_label')}
|
||||||
|
sublabel={t('help.crisis_bzga_sublabel')}
|
||||||
|
phoneOrUrl="0800 1 372 700"
|
||||||
|
colors={colors}
|
||||||
|
/>
|
||||||
|
</View>
|
||||||
|
<View style={{ borderBottomWidth: 1, borderBottomColor: colors.border }}>
|
||||||
|
<HotlineRow
|
||||||
|
label={t('help.crisis_checkdein_label')}
|
||||||
|
sublabel={t('help.crisis_checkdein_sublabel')}
|
||||||
|
phoneOrUrl="https://www.check-dein-spiel.de"
|
||||||
|
isUrl
|
||||||
|
colors={colors}
|
||||||
|
/>
|
||||||
|
</View>
|
||||||
|
<HotlineRow
|
||||||
|
label={t('help.crisis_anonyme_label')}
|
||||||
|
sublabel={t('help.crisis_anonyme_sublabel')}
|
||||||
|
phoneOrUrl="https://www.anonyme-spieler.org"
|
||||||
|
isUrl
|
||||||
|
colors={colors}
|
||||||
|
/>
|
||||||
|
</View>
|
||||||
|
|
||||||
|
<Text
|
||||||
|
style={{
|
||||||
|
fontSize: 13,
|
||||||
|
fontFamily: 'Nunito_600SemiBold',
|
||||||
|
color: colors.textMuted,
|
||||||
|
textTransform: 'uppercase',
|
||||||
|
letterSpacing: 1,
|
||||||
|
marginBottom: 8,
|
||||||
|
marginLeft: 4,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{t('help.crisis_section_general')}
|
||||||
|
</Text>
|
||||||
|
|
||||||
|
<View
|
||||||
|
style={{
|
||||||
|
backgroundColor: colors.card,
|
||||||
|
borderRadius: 14,
|
||||||
|
overflow: 'hidden',
|
||||||
|
marginBottom: 20,
|
||||||
|
shadowColor: '#000',
|
||||||
|
shadowOffset: { width: 0, height: 1 },
|
||||||
|
shadowOpacity: 0.04,
|
||||||
|
shadowRadius: 3,
|
||||||
|
elevation: 1,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<HotlineRow
|
||||||
|
label={t('help.crisis_seelsorge_label')}
|
||||||
|
sublabel={t('help.crisis_seelsorge_sublabel')}
|
||||||
|
phoneOrUrl="0800 111 0 111"
|
||||||
|
colors={colors}
|
||||||
|
/>
|
||||||
|
</View>
|
||||||
|
|
||||||
|
<View
|
||||||
|
style={{
|
||||||
|
backgroundColor: '#fef2f2',
|
||||||
|
borderRadius: 14,
|
||||||
|
borderWidth: 1.5,
|
||||||
|
borderColor: colors.error,
|
||||||
|
padding: 16,
|
||||||
|
marginBottom: 20,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<View style={{ flexDirection: 'row', alignItems: 'center', gap: 10, marginBottom: 8 }}>
|
||||||
|
<Ionicons name="warning-outline" size={20} color={colors.error} />
|
||||||
|
<Text
|
||||||
|
style={{
|
||||||
|
fontSize: 15,
|
||||||
|
fontFamily: 'Nunito_700Bold',
|
||||||
|
color: colors.error,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{t('help.crisis_emergency_label')}
|
||||||
|
</Text>
|
||||||
|
</View>
|
||||||
|
<Text
|
||||||
|
style={{
|
||||||
|
fontSize: 14,
|
||||||
|
fontFamily: 'Nunito_400Regular',
|
||||||
|
color: colors.text,
|
||||||
|
lineHeight: 21,
|
||||||
|
marginBottom: 12,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{t('help.crisis_emergency_desc')}
|
||||||
|
</Text>
|
||||||
|
<TouchableOpacity
|
||||||
|
onPress={() => Linking.openURL('tel:112')}
|
||||||
|
activeOpacity={0.7}
|
||||||
|
style={{
|
||||||
|
backgroundColor: colors.error,
|
||||||
|
borderRadius: 10,
|
||||||
|
paddingVertical: 12,
|
||||||
|
alignItems: 'center',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Text
|
||||||
|
style={{
|
||||||
|
fontSize: 16,
|
||||||
|
fontFamily: 'Nunito_700Bold',
|
||||||
|
color: '#ffffff',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{t('help.crisis_emergency_cta')}
|
||||||
|
</Text>
|
||||||
|
</TouchableOpacity>
|
||||||
|
</View>
|
||||||
|
|
||||||
|
<Text
|
||||||
|
style={{
|
||||||
|
fontSize: 12,
|
||||||
|
fontFamily: 'Nunito_400Regular',
|
||||||
|
color: colors.textMuted,
|
||||||
|
lineHeight: 18,
|
||||||
|
textAlign: 'center',
|
||||||
|
marginHorizontal: 8,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{t('help.crisis_disclaimer')}
|
||||||
|
</Text>
|
||||||
|
</ScrollView>
|
||||||
|
</View>
|
||||||
|
);
|
||||||
|
}
|
||||||
120
apps/rebreak-native/app/help/faq.tsx
Normal file
120
apps/rebreak-native/app/help/faq.tsx
Normal file
@ -0,0 +1,120 @@
|
|||||||
|
import { useState } from 'react';
|
||||||
|
import { ScrollView, Text, TouchableOpacity, View } from 'react-native';
|
||||||
|
import { useSafeAreaInsets } from 'react-native-safe-area-context';
|
||||||
|
import { Ionicons } from '@expo/vector-icons';
|
||||||
|
import { useTranslation } from 'react-i18next';
|
||||||
|
import { useColors } from '../../lib/theme';
|
||||||
|
import { AppHeader } from '../../components/AppHeader';
|
||||||
|
|
||||||
|
type FaqItem = { q: string; a: string };
|
||||||
|
|
||||||
|
function FaqRow({ q, a, colors }: FaqItem & { colors: ReturnType<typeof useColors> }) {
|
||||||
|
const [open, setOpen] = useState(false);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<View
|
||||||
|
style={{
|
||||||
|
borderBottomWidth: 1,
|
||||||
|
borderBottomColor: colors.border,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<TouchableOpacity
|
||||||
|
onPress={() => setOpen((v) => !v)}
|
||||||
|
activeOpacity={0.7}
|
||||||
|
style={{
|
||||||
|
flexDirection: 'row',
|
||||||
|
alignItems: 'center',
|
||||||
|
paddingHorizontal: 16,
|
||||||
|
paddingVertical: 14,
|
||||||
|
gap: 12,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Text
|
||||||
|
style={{
|
||||||
|
flex: 1,
|
||||||
|
fontSize: 15,
|
||||||
|
fontFamily: 'Nunito_600SemiBold',
|
||||||
|
color: colors.text,
|
||||||
|
lineHeight: 21,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{q}
|
||||||
|
</Text>
|
||||||
|
<Ionicons
|
||||||
|
name={open ? 'chevron-up' : 'chevron-down'}
|
||||||
|
size={18}
|
||||||
|
color={colors.textMuted}
|
||||||
|
/>
|
||||||
|
</TouchableOpacity>
|
||||||
|
{open ? (
|
||||||
|
<Text
|
||||||
|
style={{
|
||||||
|
paddingHorizontal: 16,
|
||||||
|
paddingBottom: 16,
|
||||||
|
fontSize: 14,
|
||||||
|
fontFamily: 'Nunito_400Regular',
|
||||||
|
color: colors.textMuted,
|
||||||
|
lineHeight: 21,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{a}
|
||||||
|
</Text>
|
||||||
|
) : null}
|
||||||
|
</View>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function FaqScreen() {
|
||||||
|
const { t } = useTranslation();
|
||||||
|
const colors = useColors();
|
||||||
|
const insets = useSafeAreaInsets();
|
||||||
|
|
||||||
|
const items: FaqItem[] = [
|
||||||
|
{ q: t('help.faq_q1'), a: t('help.faq_a1') },
|
||||||
|
{ q: t('help.faq_q2'), a: t('help.faq_a2') },
|
||||||
|
{ q: t('help.faq_q3'), a: t('help.faq_a3') },
|
||||||
|
{ q: t('help.faq_q4'), a: t('help.faq_a4') },
|
||||||
|
{ q: t('help.faq_q5'), a: t('help.faq_a5') },
|
||||||
|
{ q: t('help.faq_q6'), a: t('help.faq_a6') },
|
||||||
|
{ q: t('help.faq_q7'), a: t('help.faq_a7') },
|
||||||
|
{ q: t('help.faq_q8'), a: t('help.faq_a8') },
|
||||||
|
];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<View style={{ flex: 1, backgroundColor: colors.groupedBg }}>
|
||||||
|
<AppHeader showBack title={t('help.faq_title')} />
|
||||||
|
|
||||||
|
<ScrollView
|
||||||
|
style={{ flex: 1 }}
|
||||||
|
contentContainerStyle={{
|
||||||
|
paddingHorizontal: 16,
|
||||||
|
paddingTop: 20,
|
||||||
|
paddingBottom: insets.bottom + 40,
|
||||||
|
}}
|
||||||
|
showsVerticalScrollIndicator={false}
|
||||||
|
>
|
||||||
|
<View
|
||||||
|
style={{
|
||||||
|
backgroundColor: colors.card,
|
||||||
|
borderRadius: 14,
|
||||||
|
overflow: 'hidden',
|
||||||
|
shadowColor: '#000',
|
||||||
|
shadowOffset: { width: 0, height: 1 },
|
||||||
|
shadowOpacity: 0.04,
|
||||||
|
shadowRadius: 3,
|
||||||
|
elevation: 1,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{items.map((item, i) => (
|
||||||
|
<FaqRow
|
||||||
|
key={i}
|
||||||
|
q={item.q}
|
||||||
|
a={item.a}
|
||||||
|
colors={colors}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</View>
|
||||||
|
</ScrollView>
|
||||||
|
</View>
|
||||||
|
);
|
||||||
|
}
|
||||||
Loading…
x
Reference in New Issue
Block a user