40 lines
1.1 KiB
React
40 lines
1.1 KiB
React
|
import { AnimatePresence, motion } from "framer-motion";
|
||
|
|
import ParcelCard from "./ParcelCard";
|
||
|
|
import { Package } from "lucide-react";
|
||
|
|
|
||
|
|
function ParcelList({ parcels }) {
|
||
|
|
if (parcels.length === 0) {
|
||
|
|
return (
|
||
|
|
<motion.div
|
||
|
|
initial={{ opacity: 0, y: 10 }}
|
||
|
|
animate={{ opacity: 1, y: 0 }}
|
||
|
|
className="text-center py-16 text-gray-400"
|
||
|
|
>
|
||
|
|
<Package size={48} className="mx-auto mb-3 opacity-50" />
|
||
|
|
<p className="text-sm lg:text-base">등록된 택배가 없습니다</p>
|
||
|
|
</motion.div>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="space-y-3">
|
||
|
|
<AnimatePresence mode="popLayout">
|
||
|
|
{parcels.map((parcel, index) => (
|
||
|
|
<motion.div
|
||
|
|
key={parcel.id}
|
||
|
|
layout
|
||
|
|
initial={{ opacity: 0, y: 20 }}
|
||
|
|
animate={{ opacity: 1, y: 0 }}
|
||
|
|
exit={{ opacity: 0, x: -30 }}
|
||
|
|
transition={{ duration: 0.25, delay: index * 0.05 }}
|
||
|
|
>
|
||
|
|
<ParcelCard parcel={parcel} />
|
||
|
|
</motion.div>
|
||
|
|
))}
|
||
|
|
</AnimatePresence>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
export default ParcelList;
|