50 lines
1.4 KiB
TypeScript
50 lines
1.4 KiB
TypeScript
import type { FC } from "react";
|
|
import { useAppDispatch, useAppSelector } from "../store/hooks";
|
|
import {
|
|
clearSelectedPhase,
|
|
setSelectedPhase,
|
|
} from "../store/slices/phaseSlice";
|
|
import type { PhaseType } from "../utils/types";
|
|
|
|
interface PropType {
|
|
phase: PhaseType;
|
|
current: boolean;
|
|
}
|
|
|
|
const Phase: FC<PropType> = ({ phase, current }) => {
|
|
const dispatch = useAppDispatch();
|
|
const selected = useAppSelector((state) => state.phase.selected);
|
|
const thisSelected = selected === phase.name;
|
|
|
|
const phaseClick = () => {
|
|
if (thisSelected) {
|
|
dispatch(clearSelectedPhase());
|
|
} else {
|
|
dispatch(setSelectedPhase(phase.name));
|
|
}
|
|
};
|
|
|
|
return (
|
|
<button
|
|
type="button"
|
|
className={`overflow-hidden relative w-96 p-2 ${phase.color} border border-2 shadow-md rounded-md ${phase.borderColor}`}
|
|
onClick={phaseClick}
|
|
>
|
|
<div className="text-xl px-8">{phase.name}</div>
|
|
<div className="text-sm px-8">
|
|
{phase.minuteStart}-{phase.minuteEnd}
|
|
</div>
|
|
{thisSelected && <div className="text-md px-8">{phase.description}</div>}
|
|
{current && (
|
|
<>
|
|
<div className="rotate-45 bg-white h-16 w-16 absolute -top-10 -left-12"></div>
|
|
<div className="-rotate-45 bg-white h-16 w-16 absolute -bottom-10 -left-12"></div>
|
|
<div className="bg-white w-16 absolute bottom-0 top-0 -left-14"></div>
|
|
</>
|
|
)}
|
|
</button>
|
|
);
|
|
};
|
|
|
|
export default Phase;
|