From 933ca9a08514876385930a66cc7a914addde31e9 Mon Sep 17 00:00:00 2001
From: Mo Tarbin <mhed.t91@gmail.com>
Date: Sun, 22 Dec 2024 11:01:12 -0500
Subject: [PATCH] Add NFC URL input field and copy button in WriteNFCModal.jsx

---
 src/views/Modals/Inputs/WriteNFCModal.jsx | 28 +++++++++++++++++------
 1 file changed, 21 insertions(+), 7 deletions(-)

diff --git a/src/views/Modals/Inputs/WriteNFCModal.jsx b/src/views/Modals/Inputs/WriteNFCModal.jsx
index d71a2a3..2aad366 100644
--- a/src/views/Modals/Inputs/WriteNFCModal.jsx
+++ b/src/views/Modals/Inputs/WriteNFCModal.jsx
@@ -1,7 +1,9 @@
+import { CopyAll } from '@mui/icons-material'
 import {
   Box,
   Button,
   Checkbox,
+  Input,
   ListItem,
   Modal,
   ModalDialog,
@@ -38,7 +40,9 @@ function WriteNFCModal({ config }) {
       }
     } else {
       setNfcStatus('error')
-      setErrorMessage('NFC is not supported by this browser.')
+      setErrorMessage(
+        'NFC is not supported by this browser. You can still copy the URL and write it to an NFC tag using a compatible device.',
+      )
     }
   }
 
@@ -73,6 +77,22 @@ function WriteNFCModal({ config }) {
                 ? errorMessage
                 : 'Press the button below to write to NFC.'}
             </Typography>
+            <Input
+              value={getURL()}
+              fullWidth
+              readOnly
+              label='URL'
+              sx={{ mt: 1 }}
+              endDecorator={
+                <CopyAll
+                  sx={{ cursor: 'pointer' }}
+                  onClick={() => {
+                    navigator.clipboard.writeText(getURL())
+                    alert('URL copied to clipboard!')
+                  }}
+                />
+              }
+            />
             <ListItem>
               <Checkbox
                 checked={isAutoCompleteWhenScan}
@@ -95,12 +115,6 @@ function WriteNFCModal({ config }) {
             </Box>
           </>
         )}
-
-        <Box display={'flex'} justifyContent={'center'} mt={2}>
-          <Button onClick={handleClose} variant='outlined'>
-            Close
-          </Button>
-        </Box>
       </ModalDialog>
     </Modal>
   )