vafront/src/Components/GRNCard.jsx

import React from "react";
import { useAtom } from "jotai";
import { CurrentGRNAtom } from "../Variables";
import { useNavigate } from "react-router-dom";

function GRNCard({ GRN }) {
    const [currentGRN, setCurrentGRN] = useAtom(CurrentGRNAtom);
    const navigate = useNavigate();
    return (
        <div

            onClick={() => {

                setCurrentGRN(GRN);

                localStorage.setItem("currentGRN", JSON.stringify(GRN));

                navigate("/grn");

            }}

            className="relative overflow-hidden hover:translate-x-3 cursor-pointer hover:brightness-105 transition-all rounded-xl bg-gray-100  shadow-inner text-primary-700 border border-primary-950/50 mx-0 flex items-center "

        >

            <div className="flex w-full flex-col gap-0.5 py-2 px-3">

                <div className="flex flex-wrap gap-x-3 items-center justify-between">

                    <h5 className="text-sm font-semibold whitespace-nowrap text-primary-950">GRN : {GRN?.GRN}</h5>

                    <h5 className="text-sm font-semibold whitespace-nowrap text-primary-950">Quant : {GRN?.quantity}</h5>

                </div>

                <p className="text-sm text-primary-900 truncate" title={GRN?.supplierName}>

                    Supplier Name : {GRN?.supplierName}

                </p>

                <p className="text-sm text-primary-900 truncate" title={GRN?.buyer}>

                    Buyer : {GRN?.buyer}

                </p>

            </div>

        </div>
    );
}

export default GRNCard;