web/components/CoffeeBrew/CoffeeBrewCard/page.jsx

61 lines
1.9 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";
const CoffeeBrewCard = ({ data, last }) => {
const today = new Date();
const formattedDate = FormatJalaliDate(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">
<div>
<div className="flex">
<p className="mb-0 text-[13px] font-medium w-fit px-2 mt-1 border-l border-gray-400 ">
<small className="!text-[12px] text-gray-400">
<PersianNumber number={formattedDate} style={"!text-[12px]"} />
</small>
</p>
<p className="mb-0 text-[13px] font-medium text-gray-400 w-fit px-2 mt-1 border-l border-gray-400 ">
<PersianNumber
number={moment(data?.logAt).locale("fa").format("HH:mm")}
style={"!text-[12px]"}
/>
</p>
<p className="mb-0 text-[13px] font-medium w-fit px-2 mt-1 ">
<small className="!text-[12px] 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;