Works

src/components/Phase.tsx

@@ -0,0 +1,49 @@
+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;