Add production mode to docker

app/page.tsx

@@ -2,12 +2,11 @@
 
 import { navigate } from './action'
 import { useState, useEffect, useRef } from 'react'
-import { IconPencilMinus, IconCamera, IconDice6 } from "@tabler/icons-react"
+import { IconPencilMinus, IconDice6 } from "@tabler/icons-react"
 import { defaultAvatarImage } from './avatarImage'
-import Image from 'next/image'
 import { getUsername } from './usernameGenerate'
 import { resizeBase64Image, getBase64OfImage } from './utils'
-import Webcam from 'react-webcam'
+import WebcamPhoto from '@/components/webcamPhoto' 
 
 export default function Home() {
   const [name, setName] = useState<string|undefined>("") 
@@ -39,9 +38,8 @@ export default function Home() {
     );
   }
 
-  function takePictureAvatar() {
-    const imageSrc = webcamRef.current!.getScreenshot()
-    setAndStoreAvatar(imageSrc)
+  function takePictureAvatar(image: string) {
+    setAndStoreAvatar(image)
     setShowWebcam(false)
   }
 
@@ -74,12 +72,11 @@ export default function Home() {
         <div className="modal-box flex flex-col space-y-4">
           <div className="avatar flex flex-col items-center space-y-4">
             <div className="w-24 rounded">
-              <Image alt="" src={avatar!} />
+              <img src={avatar!} />
             </div>
             { showWebcam &&
               <>
-                <Webcam ref={webcamRef} />
-                <button className="btn btn-primary" onClick={takePictureAvatar}><IconCamera /></button>
+                <WebcamPhoto onPhoto={takePictureAvatar}/>
               </>
             }
             { !showWebcam &&
@@ -111,7 +108,7 @@ export default function Home() {
       <div className="flex flex-col space-y-4 items-center">
         <div className="avatar">
           <div className="w-24 rounded">
-            <Image alt="" src={avatar!} />
+            <img src={avatar} />
           </div>
         </div>
         <div className="flex flex-row space-x-4">