33 lines
1.1 KiB
TypeScript
33 lines
1.1 KiB
TypeScript
import React from 'react';
|
|
import { View, TouchableOpacity } from 'react-native';
|
|
import { Image } from 'expo-image';
|
|
import { X } from 'lucide-react-native';
|
|
|
|
interface RemovablePhotoTileProps {
|
|
uri: string;
|
|
onRemove: () => void;
|
|
size: number;
|
|
}
|
|
|
|
export default function RemovablePhotoTile({ uri, onRemove, size }: RemovablePhotoTileProps) {
|
|
return (
|
|
<View style={{ width: size, height: size }} className="mb-2">
|
|
<View className="bg-gray-100 rounded-2xl overflow-hidden border border-gray-200" style={{ flex: 1 }}>
|
|
<Image
|
|
source={{ uri }}
|
|
style={{ width: '100%', height: '100%' }}
|
|
contentFit="cover"
|
|
transition={200}
|
|
/>
|
|
</View>
|
|
<TouchableOpacity
|
|
onPress={onRemove}
|
|
className="absolute top-[-6px] right-[-6px] bg-red-500 rounded-full p-1 border-2 border-white shadow-sm"
|
|
activeOpacity={0.8}
|
|
>
|
|
<X size={14} color="white" strokeWidth={3} />
|
|
</TouchableOpacity>
|
|
</View>
|
|
);
|
|
}
|