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;