74 lines
2.2 KiB
TypeScript
74 lines
2.2 KiB
TypeScript
import React from "react";
|
|
import { Modal, View, Text, TouchableOpacity, Platform } from "react-native";
|
|
|
|
interface PermissionAlertModalProps {
|
|
visible: boolean;
|
|
title: string;
|
|
message: string;
|
|
primaryText: string; // Right button (e.g. OK / Confirm)
|
|
secondaryText: string; // Left button (e.g. Cancel)
|
|
onPrimary: () => void;
|
|
onSecondary: () => void;
|
|
primaryVariant?: "primary" | "danger";
|
|
}
|
|
|
|
const PermissionAlertModal: React.FC<PermissionAlertModalProps> = ({
|
|
visible,
|
|
title,
|
|
message,
|
|
primaryText,
|
|
secondaryText,
|
|
onPrimary,
|
|
onSecondary,
|
|
primaryVariant = "primary",
|
|
}) => {
|
|
const primaryBgClass =
|
|
primaryVariant === "danger" ? "bg-red-500" : "bg-primary";
|
|
return (
|
|
<Modal
|
|
visible={visible}
|
|
transparent
|
|
animationType="fade"
|
|
onRequestClose={onSecondary}
|
|
>
|
|
<View className="flex-1 items-center justify-center bg-black/30 px-6">
|
|
<View className="w-full rounded-3xl bg-white shadow-xl px-6 pt-6 pb-5">
|
|
{/* Title & message */}
|
|
<Text className="text-xl font-dmsans-bold text-black mb-1">
|
|
{title}
|
|
</Text>
|
|
<Text className="text-sm font-dmsans text-gray-600 leading-5 mb-5">
|
|
{message}
|
|
</Text>
|
|
|
|
{/* Buttons row */}
|
|
<View className="flex-row items-center justify-between mt-3 gap-3">
|
|
{/* Secondary: outlined button */}
|
|
<TouchableOpacity
|
|
activeOpacity={0.8}
|
|
onPress={onSecondary}
|
|
className="flex-1 py-2.5 rounded-xl border border-gray-300 bg-white items-center justify-center"
|
|
>
|
|
<Text className="text-sm font-dmsans text-gray-700">
|
|
{secondaryText}
|
|
</Text>
|
|
</TouchableOpacity>
|
|
|
|
{/* Primary: filled button */}
|
|
<TouchableOpacity
|
|
activeOpacity={0.9}
|
|
onPress={onPrimary}
|
|
className={`flex-1 py-2.5 rounded-xl ${primaryBgClass} items-center justify-center`}
|
|
>
|
|
<Text className="text-sm font-dmsans text-white font-semibold">
|
|
{primaryText}
|
|
</Text>
|
|
</TouchableOpacity>
|
|
</View>
|
|
</View>
|
|
</View>
|
|
</Modal>
|
|
);
|
|
};
|
|
export default PermissionAlertModal;
|