89 lines
2.3 KiB
TypeScript
89 lines
2.3 KiB
TypeScript
import Image from "next/image";
|
|
import { Pie } from "react-chartjs-2";
|
|
import { Chart as ChartJS, ArcElement, Tooltip, Legend } from "chart.js";
|
|
|
|
ChartJS.register(ArcElement, Tooltip, Legend);
|
|
|
|
import ClientOnlyPortal from "./ClientOnlyPortal";
|
|
import { forwardRef, MutableRefObject, useEffect } from "react";
|
|
|
|
interface ModalProps {
|
|
modalOpen: boolean
|
|
toggleModal: Function
|
|
card: any
|
|
}
|
|
|
|
const Modal = forwardRef<HTMLDivElement, ModalProps>(({modalOpen, toggleModal, card}, ref) => {
|
|
const data = {
|
|
labels: ["Power", "Toughness"],
|
|
datasets: [
|
|
{
|
|
label: "Card Power and Toughness",
|
|
data: [card.power, card.toughness],
|
|
backgroundColor: [
|
|
"rgba(255, 99, 132, 0.2)",
|
|
"rgba(54, 162, 235, 0.2)"
|
|
],
|
|
borderColor: [
|
|
"rgba(255, 99, 132, 1)",
|
|
"rgba(54, 162, 235, 1)"
|
|
],
|
|
borderWidth: 1,
|
|
},
|
|
]
|
|
};
|
|
|
|
useEffect(() => {
|
|
if( (ref as MutableRefObject<HTMLDivElement>).current ) {
|
|
(ref as MutableRefObject<HTMLDivElement>).current.scrollTo(0, 0);
|
|
}
|
|
}, [card])
|
|
|
|
return (
|
|
<ClientOnlyPortal selector="#modal-root">
|
|
<div ref={ref}
|
|
className={`fixed container rounded-t-3xl p-8 modal overflow-y-auto mt-4 ${
|
|
modalOpen ? "open" : ""
|
|
}`}
|
|
>
|
|
<div className="flex">
|
|
<div className="w-1/2">
|
|
{card &&
|
|
<Image
|
|
className="w-full"
|
|
src={card.image_uris?.png}
|
|
width={100}
|
|
height={100}
|
|
alt={`${card.name} Card`}
|
|
/>}
|
|
</div>
|
|
<div className="w-full pl-4">
|
|
<h1 className="text-3xl font-bold mb-4">{card?.name}</h1>
|
|
<p className="whitespace-pre-line">{card.oracle_text}</p>
|
|
<p className="italic">{card.flavor_text}</p>
|
|
<div className="w-1/2">
|
|
<Pie data={data} options={{
|
|
plugins: {
|
|
legend: {
|
|
onClick: e => null
|
|
}
|
|
}
|
|
}} />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<button
|
|
onClick={() => {
|
|
toggleModal(false);
|
|
document.body.classList.remove("prevent-scroll");
|
|
}}
|
|
>
|
|
Close
|
|
</button>
|
|
</div>
|
|
</ClientOnlyPortal>
|
|
);
|
|
});
|
|
|
|
export default Modal;
|