feat: work shifts by QR codes

src/modals/ScanningModal/ScanningModal.tsx

@@ -0,0 +1,38 @@
+import { ContextModalProps } from "@mantine/modals";
+import { Text } from "@mantine/core";
+import { useWindowEvent } from "@mantine/hooks";
+import { useState } from "react";
+
+type Props = {
+    label: string;
+    onScan: (value: string) => void;
+    closeOnScan?: boolean;
+};
+
+const ScanningModal = ({
+                           context,
+                           id,
+                           innerProps,
+                       }: ContextModalProps<Props>) => {
+    const [inputValues, setInputValues] = useState<string>("");
+
+    const { label, onScan, closeOnScan } = innerProps;
+
+    useWindowEvent("keydown", (event) => {
+        event.preventDefault();
+        console.log(inputValues);
+        setInputValues(prevState => prevState + event.key);
+        if (event.key === "Enter") {
+            onScan(inputValues);
+            if (closeOnScan) {
+                context.closeContextModal(id);
+            }
+        }
+    });
+
+    return (
+        <Text>{label}</Text>
+    );
+};
+
+export default ScanningModal;