Untitled

mail@pastecode.io avatar
unknown
tsx
2 months ago
4.4 kB
2
Indexable
Never
import { FC } from 'react';
import Image from 'next/image';
import { SoldBookType } from '@src/types/routes/profile/sold-books/soldBook.type';

interface IProps {
  booksListData: SoldBookType[];
}

const MobileSoldBooksList: FC<IProps> = ({ ...props }): JSX.Element => {
  return (
    <div className="flex flex-col gap-3 py-3 px-3 lg:hidden">
      {props.booksListData.map((item, index) => {
        return (
          <div
            key={index + 1}
            className="overflow-hidden rounded-xl border border-[#e3e3e3]"
          >
            <div className="flex items-center justify-between px-3.5 pt-3 pb-[5px] text-[14px] text-[#535660] even:bg-[#F0F0F0]">
              <p>#</p>
              <p>{index + 1}</p>
            </div>
            <div className="flex items-center justify-between px-3.5 pt-2 pb-[7px] text-[14px] text-[#535660] even:bg-[#F0F0F0]">
              <p>تصویر</p>
              <div className="relative h-[90px] w-[60px] overflow-hidden rounded-lg border border-[#e9e8e8] bg-[#eee]">
                <Image
                  src={item.imageAddress}
                  fill
                  alt={`کتاب ${item.title}`}
                />
              </div>
            </div>
            <div className="flex items-center justify-between px-3.5 pt-3 pb-[5px] text-[14px] text-[#535660] even:bg-[#F0F0F0]">
              <p>نام و نام خانوادگی</p>
              <p className="max-w-[130px] text-left">{`${item.firstName} ${item.lastName}`}</p>
            </div>
            <div className="flex items-center justify-between px-3.5 pt-3 pb-[5px] text-[14px] text-[#535660] even:bg-[#F0F0F0]">
              <p>عنوان</p>
              <p className="max-w-[200px] truncate">{item.title}</p>
            </div>
            <div className="flex items-center justify-between px-3.5 pt-3 pb-[5px] text-[14px] text-[#535660] even:bg-[#F0F0F0]">
              <p>شابک</p>
              <p>{item.isbn}</p>
            </div>
            <div className="flex items-center justify-between px-3.5 pt-3 pb-[5px] text-[14px] text-[#535660] even:bg-[#F0F0F0]">
              <p>قیمت نو</p>
              <p className="max-w-[200px] truncate">{Number(item.currentPrice).toLocaleString('fa-IR')} تومان</p>
            </div>
            <div className="flex items-center justify-between px-3.5 pt-3 pb-[5px] text-[14px] text-[#535660] even:bg-[#F0F0F0]">
              <p>شماره سفارش</p>
              <p>{item.bachnumber}</p>
            </div>
            <div className="flex items-center justify-between px-3.5 pt-3 pb-[5px] text-[14px] text-[#535660] even:bg-[#F0F0F0]">
              <p>وضعیت</p>
              <p>
                {' '}
                {item.status === '1'
                  ? 'در حد نو'
                  : item.status === '2'
                  ? 'خوب'
                  : item.status === '3'
                  ? 'قابل قبول'
                  : item.status === '4'
                  ? 'نو'
                  : ''}
              </p>
            </div>
            <div className="flex items-center justify-between px-3.5 pt-3 pb-[5px] text-[14px] text-[#535660] even:bg-[#F0F0F0]">
              <p>تعداد</p>
              <p className="max-w-[200px] truncate">{Number(item.quantity).toLocaleString('fa-IR')} عدد</p>
            </div>
            <div className="flex items-center justify-between px-3.5 pt-3 pb-[5px] text-[14px] text-[#535660] even:bg-[#F0F0F0]">
              <p>مبلغ تخفیف</p>
              <p className="max-w-[200px] truncate">{Number(item.discountPrice).toLocaleString('fa-IR')} تومان</p>
            </div>
            <div className="flex items-center justify-between px-3.5 pt-3 pb-[5px] text-[14px] text-[#535660] even:bg-[#F0F0F0]">
              <p>مبلغ نهایی</p>
              <p className="max-w-[200px] truncate">{Number(item.totalPrice).toLocaleString('fa-IR')} تومان</p>
            </div>
            <div className="flex items-center justify-between px-3.5 pt-3 pb-[5px] text-[14px] text-[#535660] even:bg-[#F0F0F0]">
              <p>شماره قفسه</p>
              <p className="max-w-[130px] text-left">{item.location}</p>
            </div>
          </div>
        );
      })}
    </div>
  );
};

export default MobileSoldBooksList;
Leave a Comment