103 lines
3.0 KiB
TypeScript
103 lines
3.0 KiB
TypeScript
import React from "react";
|
|
import { Modal, Pressable, StyleSheet, View } from "react-native";
|
|
import { Text } from "./ui/text";
|
|
import { Button } from "./ui/button";
|
|
import { CheckCircle2, X } from "@/lib/icons";
|
|
import { useColorScheme } from "nativewind";
|
|
|
|
interface ConfirmSubmitModalProps {
|
|
visible: boolean;
|
|
onClose: () => void;
|
|
onConfirm: () => void;
|
|
title?: string;
|
|
description?: string;
|
|
confirmText?: string;
|
|
cancelText?: string;
|
|
loading?: boolean;
|
|
}
|
|
|
|
export function ConfirmSubmitModal({
|
|
visible,
|
|
onClose,
|
|
onConfirm,
|
|
title = "Confirm submission",
|
|
description = "Are you sure all the information is correct? Please review before proceeding.",
|
|
confirmText = "Yes, submit",
|
|
cancelText = "Review again",
|
|
loading = false,
|
|
}: ConfirmSubmitModalProps) {
|
|
const { colorScheme } = useColorScheme();
|
|
const isDark = colorScheme === "dark";
|
|
|
|
return (
|
|
<Modal
|
|
transparent
|
|
visible={visible}
|
|
animationType="fade"
|
|
onRequestClose={onClose}
|
|
>
|
|
<Pressable
|
|
style={StyleSheet.absoluteFill}
|
|
className="bg-black/60 items-center justify-center p-6"
|
|
onPress={onClose}
|
|
>
|
|
<Pressable
|
|
className="w-full max-w-sm bg-card rounded-[6px] border border-border overflow-hidden"
|
|
onPress={(e) => e.stopPropagation()}
|
|
>
|
|
<View className="flex-row items-center justify-between px-5 pt-5 pb-2">
|
|
<View className="flex-row items-center gap-3 flex-1">
|
|
<View className="p-2 rounded-full bg-primary/10">
|
|
<CheckCircle2 size={20} color="#ea580c" />
|
|
</View>
|
|
<Text variant="h4" className="font-sans-black tracking-tight flex-1">
|
|
{title}
|
|
</Text>
|
|
</View>
|
|
<Button
|
|
variant="ghost"
|
|
size="icon"
|
|
className="h-8 w-8"
|
|
onPress={onClose}
|
|
>
|
|
<X size={18} color={isDark ? "#94a3b8" : "#64748b"} />
|
|
</Button>
|
|
</View>
|
|
|
|
<View className="px-5 pb-6">
|
|
<Text
|
|
variant="p"
|
|
className="text-muted-foreground font-sans-medium leading-5"
|
|
>
|
|
{description}
|
|
</Text>
|
|
</View>
|
|
|
|
<View className="flex-row border-t border-border p-3 gap-3">
|
|
<Button
|
|
variant="outline"
|
|
className="flex-1 h-12 rounded-[6px]"
|
|
onPress={onClose}
|
|
disabled={loading}
|
|
>
|
|
<Text className="font-sans-bold text-xs">
|
|
{cancelText}
|
|
</Text>
|
|
</Button>
|
|
<Button
|
|
variant="default"
|
|
className="flex-1 h-12 rounded-[6px] bg-primary"
|
|
onPress={onConfirm}
|
|
loading={loading}
|
|
>
|
|
<Text className="text-white font-sans-bold text-xs">
|
|
{confirmText}
|
|
</Text>
|
|
</Button>
|
|
</View>
|
|
</Pressable>
|
|
</Pressable>
|
|
</Modal>
|
|
);
|
|
}
|