77 lines
2.5 KiB
JavaScript
77 lines
2.5 KiB
JavaScript
import React from "react";
|
|
import Image from "next/image";
|
|
import adjust from "@img/adjust.png";
|
|
|
|
import PersianNumber from "../../../plugins/PersianNumber";
|
|
import FormatJalaliDate from "plugins/FormatJalaliDate/page";
|
|
import moment from "jalali-moment";
|
|
import { useLocale } from "next-intl";
|
|
import FormatJalaliDateEn from "plugins/FormatJalaliDateEn/page";
|
|
|
|
const CoffeeBrewCard = ({ data, last }) => {
|
|
const today = new Date();
|
|
const locale = useLocale();
|
|
const isRTL = locale === "fa";
|
|
|
|
const formattedDate = FormatJalaliDate(data?.logAt, true);
|
|
const formattedDateEn = FormatJalaliDateEn(data?.logAt, true);
|
|
|
|
return (
|
|
<div
|
|
className={` rounded-lg p-4 mt-3 ${
|
|
last ? "bg-gray-200 border border-primary-600" : "bg-gray-50"
|
|
} `}
|
|
>
|
|
<div
|
|
className={`flex justify-between ${isRTL ? "rtl" : "ltr ml-[45px]"}`}
|
|
>
|
|
<div>
|
|
<div className="flex">
|
|
<p className="mb-0 text-[11px] font-medium w-fit px-1 mt-1 ">
|
|
<small className="!text-[10px] text-gray-400">
|
|
<PersianNumber
|
|
number={isRTL ? formattedDate : formattedDateEn}
|
|
style={"!text-[10px]"}
|
|
/>
|
|
</small>
|
|
</p>
|
|
|
|
<div className="bg-gray-300 h-3 w-[1px] mt-[6px]"></div>
|
|
<p className="mb-0 text-[10px] font-medium text-gray-400 w-fit px-1 mt-[6px] ">
|
|
{isRTL ? (
|
|
<PersianNumber
|
|
number={moment(data?.logAt).locale("fa").format("HH:mm")}
|
|
style={"!text-[10px]"}
|
|
/>
|
|
) : (
|
|
<>{moment(data?.logAt).locale("fa").format("HH:mm")}</>
|
|
)}
|
|
</p>
|
|
<div className="bg-gray-300 h-3 w-[1px] mt-[6px]"></div>
|
|
<p className="mb-0 text-[11px] font-medium w-fit px-1 mt-1 ">
|
|
<small className="!text-[10px] text-gray-400">
|
|
{data?.logBy}{" "}
|
|
</small>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className=" mt-2 ltr relative">
|
|
<div className="absolute top-[-15px]">
|
|
<Image src={adjust} className="opacity-50 w-[35px]" />
|
|
</div>
|
|
|
|
<div className=" w-full relative mr-5">
|
|
<p className="mb-0 text-gray-500 text-left pl-[55px] ">
|
|
BCG : {data?.ratio} | OEG : {data?.extractionTime} | ET :{" "}
|
|
{data?.finalYield}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default CoffeeBrewCard;
|