70 lines
2.1 KiB
TypeScript
70 lines
2.1 KiB
TypeScript
import { View, ScrollView, Pressable } from "react-native";
|
|
import { useSirouRouter } from "@sirou/react-native";
|
|
import { AppRoutes } from "@/lib/routes";
|
|
import { Text } from "@/components/ui/text";
|
|
import { Card, CardContent } from "@/components/ui/card";
|
|
import { Bell, Settings, ChevronRight } from "@/lib/icons";
|
|
|
|
const MOCK_NOTIFICATIONS = [
|
|
{
|
|
id: "1",
|
|
title: "Invoice reminder",
|
|
body: "Invoice #2 to Robin Murray is due in 2 days.",
|
|
time: "2h ago",
|
|
read: false,
|
|
},
|
|
{
|
|
id: "2",
|
|
title: "Payment received",
|
|
body: "Payment of $500 received for Invoice #4.",
|
|
time: "1d ago",
|
|
read: true,
|
|
},
|
|
{
|
|
id: "3",
|
|
title: "Proforma submission",
|
|
body: "Vendor A submitted a quote for Marketing Landing Page.",
|
|
time: "2d ago",
|
|
read: true,
|
|
},
|
|
];
|
|
|
|
export default function NotificationsScreen() {
|
|
const nav = useSirouRouter<AppRoutes>();
|
|
return (
|
|
<ScrollView
|
|
className="flex-1 bg-background"
|
|
contentContainerStyle={{ padding: 16, paddingBottom: 32 }}
|
|
>
|
|
<View className="mb-4 flex-row items-center justify-between">
|
|
<View className="flex-row items-center gap-2">
|
|
<Bell color="#18181b" size={22} strokeWidth={2} />
|
|
<Text className="text-xl font-semibold text-gray-900">
|
|
Notifications
|
|
</Text>
|
|
</View>
|
|
<Pressable
|
|
className="flex-row items-center gap-1"
|
|
onPress={() => nav.go("notifications/settings")}
|
|
>
|
|
<Settings color="#ea580c" size={18} strokeWidth={2} />
|
|
<Text className="text-primary font-medium">Settings</Text>
|
|
</Pressable>
|
|
</View>
|
|
|
|
{MOCK_NOTIFICATIONS.map((n) => (
|
|
<Card
|
|
key={n.id}
|
|
className={`mb-2 ${!n.read ? "border-primary/30" : ""}`}
|
|
>
|
|
<CardContent className="py-3">
|
|
<Text className="font-semibold text-gray-900">{n.title}</Text>
|
|
<Text className="text-muted-foreground mt-1 text-sm">{n.body}</Text>
|
|
<Text className="text-muted-foreground mt-1 text-xs">{n.time}</Text>
|
|
</CardContent>
|
|
</Card>
|
|
))}
|
|
</ScrollView>
|
|
);
|
|
}
|