danovinTasks/src/components/ReactTable5/RenderRowSubComponent.js

import React from "react";

const RenderRowSubComponent = ({ columns, addTab, row }) => {
  return (
    <div
      className="w-full flex flex-row items-center border-r-4 border-blue-600 p-2 "
      style={{ backgroundColor: "#FBFCFE" }}
    >
      {/* right */}
      <div
        className="flex flex-row  flex-wrap items-center "
        style={{ width: "90%" }}
      >
        {/* 1 */}
        <div className="flex flex-row items-center mr-2 my-2">
          <div
            className="w-1 h-4 ml-1 rounded"
            style={{ backgroundColor: "#EDF2FB" }}
          ></div>
          <p
            className="text-xs text-blue-400"
            style={{ borderColor: "#65A9FF" }}
          >
            نام و نام خانوادگی:
            <span className="mr-1 text-black">{row.name}</span>
          </p>
        </div>
        {/* 2 */}
        <div className="flex flex-row items-center mr-2 my-2">
          <div
            className="w-1 h-4 ml-1 rounded"
            style={{ backgroundColor: "#EDF2FB" }}
          ></div>
          <p
            className="text-xs text-blue-400"
            style={{ borderColor: "#65A9FF" }}
          >
            تاریخ سفارش:
            <span className="mr-1 text-black">{row.order_date}</span>
          </p>
        </div>
        {/* 3 */}
        <div className="flex flex-row items-center mr-2 my-2">
          <div
            className="w-1 h-4 ml-1 rounded"
            style={{ backgroundColor: "#EDF2FB" }}
          ></div>
          <p
            className="text-xs text-blue-400"
            style={{ borderColor: "#65A9FF" }}
          >
            مبلغ سفارش:
            <span className="mr-1 text-black">{row.order_price}</span>
          </p>
        </div>
        {/* 4 */}
        <div className="flex flex-row items-center mr-2 my-2">
          <div
            className="w-1 h-4 ml-1 rounded"
            style={{ backgroundColor: "#EDF2FB" }}
          ></div>
          <p
            className="text-xs text-blue-400"
            style={{ borderColor: "#65A9FF" }}
          >
            شماره سفارش:
            <span className="mr-1 text-black">{row.order_number}</span>
          </p>
        </div>
        {/* 5 */}
        <div className="flex flex-row items-center mr-2 my-2">
          <div
            className="w-1 h-4 ml-1 rounded"
            style={{ backgroundColor: "#EDF2FB" }}
          ></div>
          <p
            className="text-xs text-blue-400"
            style={{ borderColor: "#65A9FF" }}
          >
            شغل کاربر:
            <span className="mr-1 text-black">{row.user_job}</span>
          </p>
        </div>
        {/* 6 */}
        <div className="flex flex-row items-center mr-2 my-2">
          <div
            className="w-1 h-4 ml-1 rounded"
            style={{ backgroundColor: "#EDF2FB" }}
          ></div>
          <p
            className="text-xs text-blue-400"
            style={{ borderColor: "#65A9FF" }}
          >
            وضعیت سفارش:
          </p>
          <span className="mr-1 text-black text-xs">
            {columns[5].Cell({ value: row.order_status })}
          </span>
        </div>
        {/* 7 */}
        <div className="flex flex-row items-center mr-2 my-2">
          <div
            className="w-1 h-4 ml-1 rounded"
            style={{ backgroundColor: "#EDF2FB" }}
          ></div>
          <p
            className="text-xs text-blue-400"
            style={{ borderColor: "#65A9FF" }}
          >
            سطح اهمیت:
          </p>
          <span className="mr-1 text-xs text-black">
            {columns[6].Cell({ value: row.order_level })}
          </span>
        </div>
        {/* 8 */}
        <div className="flex flex-row items-center mr-2 my-2">
          <div
            className="w-1 h-4 ml-1 rounded"
            style={{ backgroundColor: "#EDF2FB" }}
          ></div>
          <p
            className="text-xs text-blue-400"
            style={{ borderColor: "#65A9FF" }}
          >
            محل تولد:
            <span className="mr-1 text-black">{row.birth_place}</span>
          </p>
        </div>
        {/* 9 */}
        <div className="flex flex-row items-center mr-2 my-2">
          <div
            className="w-1 h-4 ml-1 rounded"
            style={{ backgroundColor: "#EDF2FB" }}
          ></div>
          <p
            className="text-xs text-blue-400"
            style={{ borderColor: "#65A9FF" }}
          >
            تلفن محل کار:
            <span className="mr-1 text-black">{row.office_phone}</span>
          </p>
        </div>
        {/* 10 */}
        <div className="flex flex-row items-center mr-2 my-2">
          <div
            className="w-1 h-4 ml-1 rounded"
            style={{ backgroundColor: "#EDF2FB" }}
          ></div>
          <p
            className="text-xs text-blue-400"
            style={{ borderColor: "#65A9FF" }}
          >
            تحصیلات:
            <span className="mr-1 text-black">{row.education}</span>
          </p>
        </div>
        {/* 11 */}
        <div className="flex flex-row items-center mr-2 my-2">
          <div
            className="w-1 h-4 ml-1 rounded"
            style={{ backgroundColor: "#EDF2FB" }}
          ></div>
          <p
            className="text-xs text-blue-400"
            style={{ borderColor: "#65A9FF" }}
          >
            تاریخ تولد:
            <span className="mr-1 text-black">{row.birth_day}</span>
          </p>
        </div>
        {/* 12 */}
        <div className="flex flex-row items-center mr-2 my-2">
          <div
            className="w-1 h-4 ml-1 rounded"
            style={{ backgroundColor: "#EDF2FB" }}
          ></div>
          <p
            className="text-xs text-blue-400"
            style={{ borderColor: "#65A9FF" }}
          >
            شغل:
            <span className="mr-1 text-black">{row.job}</span>
          </p>
        </div>
        {/* 13 */}
        <div className="flex flex-row items-center mr-2 my-2">
          <div
            className="w-1 h-4 ml-1 rounded"
            style={{ backgroundColor: "#EDF2FB" }}
          ></div>
          <p
            className="text-xs text-blue-400"
            style={{ borderColor: "#65A9FF" }}
          >
            دانشگاه:
            <span className="mr-1 text-black">{row.uni}</span>
          </p>
        </div>
        {/* 14 */}
        <div className="flex flex-row items-center mr-2 my-2">
          <div
            className="w-1 h-4 ml-1 rounded"
            style={{ backgroundColor: "#EDF2FB" }}
          ></div>
          <p
            className="text-xs text-blue-400"
            style={{ borderColor: "#65A9FF" }}
          >
            رشته تحصیلی:
            <span className="mr-1 text-black">{row.field_study}</span>
          </p>
        </div>
        {/* 15 */}
        <div className="flex flex-row items-center mr-2 my-2">
          <div
            className="w-1 h-4 ml-1 rounded"
            style={{ backgroundColor: "#EDF2FB" }}
          ></div>
          <p
            className="text-xs text-blue-400"
            style={{ borderColor: "#65A9FF" }}
          >
            اخلاق:
            <span className="mr-1 text-black">{row.behaviour}</span>
          </p>
        </div>
        {/* 16 */}
        <div className="flex flex-row items-center mr-2 my-2">
          <div
            className="w-1 h-4 ml-1 rounded"
            style={{ backgroundColor: "#EDF2FB" }}
          ></div>
          <p
            className="text-xs text-blue-400"
            style={{ borderColor: "#65A9FF" }}
          >
            نشانی:
            <span className="mr-1 text-black">{row.address}</span>
          </p>
        </div>
      </div>
      {/* left */}
      <div
        className="flex flex-col items-end justify-end"
        style={{ width: "10%" }}
      >
        <button
          className="border rounded w-8/12 text-xs py-2 mb-2 bg-white"
          style={{ borderColor: "#D53921", color: "#D53921" }}
        >
          حذف
        </button>
        <button
          className="border rounded w-8/12 text-xs py-2 bg-white"
          style={{ borderColor: "#65A9FF", color: "#65A9FF" }}
          onClick={() => {
            console.log(row.name);
            addTab({ name: row.name, id: row.id });
          }}
        >
          جزئیات بیشتر
        </button>
      </div>
    </div>
  );
};

export default RenderRowSubComponent;