58 lines
1.6 KiB
TypeScript
58 lines
1.6 KiB
TypeScript
import React from 'react';
|
|
import { Modal, View, Text, TouchableOpacity } from 'react-native';
|
|
import { AppButton } from './AppButton';
|
|
|
|
interface ConfirmModalProps {
|
|
visible: boolean;
|
|
title: string;
|
|
message: string;
|
|
confirmLabel?: string;
|
|
cancelLabel?: string;
|
|
confirmVariant?: 'primary' | 'danger';
|
|
onConfirm: () => void;
|
|
onCancel: () => void;
|
|
}
|
|
|
|
export const ConfirmModal: React.FC<ConfirmModalProps> = ({
|
|
visible,
|
|
title,
|
|
message,
|
|
confirmLabel = 'Confirm',
|
|
cancelLabel = 'Cancel',
|
|
confirmVariant = 'primary',
|
|
onConfirm,
|
|
onCancel,
|
|
}) => {
|
|
return (
|
|
<Modal visible={visible} transparent animationType="fade" onRequestClose={onCancel}>
|
|
<TouchableOpacity
|
|
className="flex-1 bg-black/50 items-center justify-center px-6"
|
|
activeOpacity={1}
|
|
onPress={onCancel}
|
|
>
|
|
<TouchableOpacity
|
|
className="w-full bg-white rounded-2xl p-6 shadow-lg"
|
|
activeOpacity={1}
|
|
>
|
|
<Text className="text-xl font-bold text-gray-900 mb-2">{title}</Text>
|
|
<Text className="text-gray-600 text-sm mb-6">{message}</Text>
|
|
<View className="flex-row gap-3">
|
|
<AppButton
|
|
title={cancelLabel}
|
|
onPress={onCancel}
|
|
variant="outline"
|
|
className="flex-1"
|
|
/>
|
|
<AppButton
|
|
title={confirmLabel}
|
|
onPress={onConfirm}
|
|
variant={confirmVariant}
|
|
className="flex-1"
|
|
/>
|
|
</View>
|
|
</TouchableOpacity>
|
|
</TouchableOpacity>
|
|
</Modal>
|
|
);
|
|
};
|