Spaces:
Sleeping
Sleeping
File size: 2,677 Bytes
0f8617c | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 | import { useState } from 'react';
import { Trash2, Edit2, TrendingUp } from 'lucide-react';
const PackageCard = ({ pkg, onEdit, onDelete, bookingCount }) => {
return (
<div className="bg-white rounded-lg border border-gray-200 p-6 hover:shadow-lg transition">
<div className="flex justify-between items-start mb-4">
<div>
<h3 className="text-xl font-bold text-gray-900">{pkg.name}</h3>
<p className="text-sm text-gray-500">{pkg.description}</p>
</div>
{pkg.active && (
<span className="px-3 py-1 bg-green-100 text-green-700 text-xs font-bold rounded-full">
Active
</span>
)}
</div>
<div className="bg-gradient-to-r from-blue-500 to-indigo-600 rounded-lg p-4 mb-4 text-white">
<div className="text-3xl font-bold">₹{pkg.price}</div>
<div className="text-sm opacity-90">{pkg.priceUnit}</div>
</div>
<div className="space-y-2 mb-4 text-sm text-gray-700">
<div className="flex items-center">
<span className="font-semibold w-24">Duration:</span>
{pkg.duration} hours
</div>
<div className="flex items-center">
<span className="font-semibold w-24">Photos:</span>
{pkg.deliverables?.numPhotos || 'N/A'} photos
</div>
<div className="flex items-center">
<span className="font-semibold w-24">Edited:</span>
{pkg.deliverables?.numEdited || 'N/A'} edited
</div>
<div className="flex items-center">
<span className="font-semibold w-24">Locations:</span>
{pkg.deliverables?.numLocations || 1} location(s)
</div>
{pkg.deliverables?.includesAlbum && (
<div className="flex items-center text-green-600">
✓ Includes Album Book
</div>
)}
</div>
<div className="flex items-center gap-2 mb-4 text-sm text-gray-600">
<TrendingUp size={16} />
<span>{bookingCount || 0} bookings</span>
</div>
<div className="flex gap-2">
<button
onClick={() => onEdit(pkg)}
className="flex-1 flex items-center justify-center gap-2 bg-blue-50 text-blue-600 hover:bg-blue-100 py-2 rounded-lg font-medium transition"
>
<Edit2 size={16} /> Edit
</button>
<button
onClick={() => onDelete(pkg._id)}
className="flex-1 flex items-center justify-center gap-2 bg-red-50 text-red-600 hover:bg-red-100 py-2 rounded-lg font-medium transition"
>
<Trash2 size={16} /> Delete
</button>
</div>
</div>
);
};
export default PackageCard;
|