54 lines
1.9 KiB
TypeScript
54 lines
1.9 KiB
TypeScript
import React from 'react';
|
|
import { View, Text, TouchableOpacity } from 'react-native';
|
|
import { FileText, Trash2 } from 'lucide-react-native';
|
|
import { DocumentPickerAsset } from 'expo-document-picker';
|
|
|
|
interface FileAttachmentCardProps {
|
|
file: DocumentPickerAsset;
|
|
onRemove: () => void;
|
|
}
|
|
|
|
export default function FileAttachmentCard({ file, onRemove }: FileAttachmentCardProps) {
|
|
|
|
// Format size in readable format if available
|
|
const formatBytes = (bytes?: number) => {
|
|
if (!bytes) return 'Dimensione sconosciuta';
|
|
if (bytes === 0) return '0 Bytes';
|
|
const k = 1024;
|
|
const sizes = ['Bytes', 'KB', 'MB', 'GB'];
|
|
const i = Math.floor(Math.log(bytes) / Math.log(k));
|
|
return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
|
|
};
|
|
|
|
return (
|
|
<View className="flex-row items-center bg-white border border-gray-200 rounded-2xl p-4 mb-3 shadow-sm">
|
|
{/* File Icon */}
|
|
<View className="bg-blue-50 p-3 rounded-xl mr-4 border border-blue-100">
|
|
<FileText size={28} color="#1071C2" />
|
|
</View>
|
|
|
|
{/* File Info */}
|
|
<View className="flex-1 mr-3 justify-center">
|
|
<Text
|
|
className="text-gray-800 font-bold text-base mb-1"
|
|
numberOfLines={1}
|
|
ellipsizeMode="middle"
|
|
>
|
|
{file.name}
|
|
</Text>
|
|
<Text className="text-gray-400 font-medium text-sm">
|
|
{formatBytes(file.size)}
|
|
</Text>
|
|
</View>
|
|
|
|
{/* Remove Button */}
|
|
<TouchableOpacity
|
|
onPress={onRemove}
|
|
className="p-3 bg-red-50 border border-red-100 rounded-xl active:bg-red-100"
|
|
>
|
|
<Trash2 size={18} color="#ef4444" />
|
|
</TouchableOpacity>
|
|
</View>
|
|
);
|
|
}
|