Add containers

src/app/page.tsx

@@ -5,6 +5,10 @@ export default function Home() {
     <main className="flex min-h-screen flex-col items-center p-24">
 
       <MyButton />
+      <div className="flex flex-col justify-between">
+      <div className="border-solid border-2 w-5 h-[100dvh]"></div>
+      <div className="border-solid border-2 w-5 h-full"></div>
+      </div>
     </main>
   );
 }

src/components/button.tsx

@@ -1,15 +1,30 @@
 "use client";
 
-import { useEffect, useState } from "react";
+import { ChangeEventHandler, useEffect, useState } from "react";
 import { ImageLike, createWorker } from "tesseract.js";
 
 const MyButton = () => {
   const [selectedFile, setSelectedFile] = useState<ImageLike>("");
   const [text, setText] = useState<string>("");
   const [cardNumber, setCardNumber] = useState<string>("");
 
+  const scanNumber = async (event: any) => {
+    const photo = event.target?.files[0];
+
+    if (photo) {
+      //recognize text from photo
+      const worker = await createWorker("eng");
+      const ret = await worker.recognize(photo);
+      const textFromPhoto = ret.data.text;
+      await worker.terminate();
+      //filter numbers from text
+      const numberFromText = textFromPhoto.replace(/[^0-9]/g, "");
+      setCardNumber(numberFromText);
+    }
+  };
+
   const handleFileChange = (event: any) => {
-    const file = event.target.files[0];
+    const file = event.target?.files[0];
     console.log(file);
 
     setSelectedFile(file);