outline-mobile/src/components/MeasurementItem.tsx

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>
  );
}