You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
45 lines
1.5 KiB
45 lines
1.5 KiB
import icon_check_s from '../assets/icon_check_s_s.svg';
|
|
import icon_check_u from '../assets/icon_check_s_u.svg';
|
|
import icon_arr from '../assets/icon_arr_p_r.svg';
|
|
import { Measurement } from '../services/apiTypes';
|
|
|
|
export default function MeasurementItem({
|
|
item,
|
|
editMode,
|
|
selected,
|
|
onDetail,
|
|
onSelected,
|
|
}: {
|
|
item: Measurement;
|
|
editMode: boolean;
|
|
selected: boolean;
|
|
onDetail?: () => void;
|
|
onSelected?: () => void;
|
|
}) {
|
|
return (
|
|
<div className="flex mx-2 gap-3" onClick={editMode ? onSelected : undefined}>
|
|
{editMode && (
|
|
<div className="flex justify-center items-center">
|
|
<img className="w-[14px]" src={selected ? icon_check_s : icon_check_u} alt="icon" />
|
|
</div>
|
|
)}
|
|
<main className="flex-1">
|
|
<header className="flex items-center gap-2">
|
|
<h1 className="text-[15px] font-medium ">{item.name}</h1>
|
|
{/* <span className="text-sm text-[#b7b7b7]">{item.createAt.replace('T',' ').split(' ')[1]}</span> */}
|
|
</header>
|
|
<main className="flex mt-2">
|
|
<p className="flex-1 text-sm ">{`${item.line}`}</p>
|
|
<p className="flex-1 text-sm ">{`${item.section}`}</p>
|
|
<p className="flex-1 text-sm ">{`${item.direction}方向`}</p>
|
|
</main>
|
|
</main>
|
|
{!editMode && (
|
|
<aside className="flex items-center" onClick={onDetail}>
|
|
<span className="mr-2 text-sm text-primary font-medium">查看</span>
|
|
<img src={icon_arr} alt="arr" className="h-[10px]" />
|
|
</aside>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|