vafront/src/Components/RollCard.jsx

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

function RollCard({ roll, index }) {
    const [currentRoll, setCurrentRoll] = useAtom(CurrentRollAtom);
    const navigate = useNavigate();
    return (
        <div

            key={index}

            onClick={() => {

                setCurrentRoll(roll);

                navigate("/roll");

            }}

            className="relative hover:scale-90 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 items-center justify-between">

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

                </div>

                <p className="text-sm text-primary-900 truncate">minWidth : {roll?.minWidth}</p>

                <p className="text-sm text-primary-900 truncate">rLength : {roll?.rLength}</p>

            </div>

        </div>
    );
}

export default RollCard;