103 lines
3.6 KiB
TypeScript
103 lines
3.6 KiB
TypeScript
import React from "react";
|
|
import { Modal, Pressable, View, Dimensions, ScrollView } from "react-native";
|
|
import { Text } from "./ui/text";
|
|
import { ScanLine, X, Edit } from "@/lib/icons";
|
|
import { useColorScheme } from "nativewind";
|
|
|
|
const { height: SCREEN_HEIGHT } = Dimensions.get("window");
|
|
|
|
interface CreateMethodSheetProps {
|
|
visible: boolean;
|
|
onClose: () => void;
|
|
onSelectScan: () => void;
|
|
onSelectManual: () => void;
|
|
title?: string;
|
|
}
|
|
|
|
export function CreateMethodSheet({
|
|
visible,
|
|
onClose,
|
|
onSelectScan,
|
|
onSelectManual,
|
|
title = "Create",
|
|
}: CreateMethodSheetProps) {
|
|
const { colorScheme } = useColorScheme();
|
|
const isDark = colorScheme === "dark";
|
|
|
|
return (
|
|
<Modal
|
|
visible={visible}
|
|
transparent
|
|
animationType="slide"
|
|
onRequestClose={onClose}
|
|
>
|
|
<Pressable className="flex-1 bg-black/40" onPress={onClose}>
|
|
<View className="flex-1 justify-end">
|
|
<Pressable
|
|
className="bg-card rounded-t-[36px] overflow-hidden border-t-[3px] border-border/20"
|
|
style={{ maxHeight: SCREEN_HEIGHT * 0.5 }}
|
|
onPress={(e) => e.stopPropagation()}
|
|
>
|
|
<View className="px-6 pb-4 pt-4 flex-row justify-between items-center">
|
|
<View className="w-10" />
|
|
<Text className="text-foreground font-sans-bold text-[18px]">
|
|
{title}
|
|
</Text>
|
|
<Pressable
|
|
onPress={onClose}
|
|
className="h-8 w-8 bg-secondary/80 rounded-full items-center justify-center border border-border/10"
|
|
>
|
|
<X
|
|
size={14}
|
|
color={isDark ? "#f1f5f9" : "#0f172a"}
|
|
strokeWidth={2.5}
|
|
/>
|
|
</Pressable>
|
|
</View>
|
|
|
|
<ScrollView
|
|
className="px-5"
|
|
showsVerticalScrollIndicator={false}
|
|
contentContainerStyle={{ paddingBottom: 40 }}
|
|
>
|
|
<Pressable
|
|
onPress={onSelectScan}
|
|
className="flex-row items-center gap-3.5 p-4 mb-2 rounded-[6px] border border-border bg-card active:opacity-70"
|
|
>
|
|
<View className="h-10 w-10 rounded-full bg-primary/10 items-center justify-center">
|
|
<ScanLine color="#E46212" size={20} strokeWidth={2} />
|
|
</View>
|
|
<View className="flex-1">
|
|
<Text className="text-foreground text-[14px] font-sans-bold">
|
|
Scan
|
|
</Text>
|
|
<Text className="text-muted-foreground text-[12px] font-sans-medium mt-0.5">
|
|
Capture a photo and auto-fill the form
|
|
</Text>
|
|
</View>
|
|
</Pressable>
|
|
|
|
<Pressable
|
|
onPress={onSelectManual}
|
|
className="flex-row items-center gap-3.5 p-4 mb-2 rounded-[6px] border border-border bg-card active:opacity-70"
|
|
>
|
|
<View className="h-10 w-10 rounded-full bg-primary/10 items-center justify-center">
|
|
<Edit color="#E46212" size={20} strokeWidth={2} />
|
|
</View>
|
|
<View className="flex-1">
|
|
<Text className="text-foreground text-[14px] font-sans-bold">
|
|
Enter manually
|
|
</Text>
|
|
<Text className="text-muted-foreground text-[12px] font-sans-medium mt-0.5">
|
|
Enter all the details yourself
|
|
</Text>
|
|
</View>
|
|
</Pressable>
|
|
</ScrollView>
|
|
</Pressable>
|
|
</View>
|
|
</Pressable>
|
|
</Modal>
|
|
);
|
|
}
|