Yaltopia-Tickets-App/app/notifications/settings.tsx

50 lines
1.9 KiB
TypeScript

import { View, ScrollView, Switch } from "react-native";
import { useSirouRouter } from "@sirou/react-native";
import { AppRoutes } from "@/lib/routes";
import { useState } from "react";
import { Text } from "@/components/ui/text";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
export default function NotificationSettingsScreen() {
const nav = useSirouRouter<AppRoutes>();
const [invoiceReminders, setInvoiceReminders] = useState(true);
const [daysBeforeDue, setDaysBeforeDue] = useState(2);
const [newsAlerts, setNewsAlerts] = useState(true);
const [reportReady, setReportReady] = useState(true);
return (
<ScrollView
className="flex-1 bg-background"
contentContainerStyle={{ padding: 16, paddingBottom: 32 }}
>
<Card className="mb-4">
<CardHeader>
<CardTitle>Notification settings</CardTitle>
</CardHeader>
<CardContent className="gap-4">
<View className="flex-row items-center justify-between">
<Text className="text-gray-900">Invoice reminders</Text>
<Switch
value={invoiceReminders}
onValueChange={setInvoiceReminders}
/>
</View>
<View className="flex-row items-center justify-between">
<Text className="text-gray-900">News & announcements</Text>
<Switch value={newsAlerts} onValueChange={setNewsAlerts} />
</View>
<View className="flex-row items-center justify-between">
<Text className="text-gray-900">Report ready</Text>
<Switch value={reportReady} onValueChange={setReportReady} />
</View>
</CardContent>
</Card>
<Button variant="outline" onPress={() => nav.back()}>
<Text className="font-medium">Back</Text>
</Button>
</ScrollView>
);
}