Add DEBUG component for development environment

Introduced a new DEBUG component exclusively for the development environment. This component contains navigation options for email verification and the 'thank you' page. Updated the .gitignore file to no longer exclude DEBUG files, and included a basic layout and styling for the component.

.gitignore

@@ -21,6 +21,3 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
-
-**/DEBUG
-**/DEBUG*

src/App.tsx

@@ -6,6 +6,7 @@ import Footer from "./components/footer/footer";
 import React from "react";
 import VerifyMail from "./components/verify_email/verify_mail";
 import ThankYou from "./components/verify_email/thank_you";
+import DEBUG from "./components/DEBUG/DEBUG";
 
 function App() {
     return (
@@ -16,6 +17,7 @@ function App() {
                     <Route path="/contact" element={<ContactForm/>}/>
                     <Route path="/verify-email" element={<VerifyMail/>}/>
                     <Route path="/thank-you" element={<ThankYou/>}/>
+                    {process.env.NODE_ENV === 'development' && <Route path="/debug" element={<DEBUG/>}/>}
                 </Routes>
             </BrowserRouter>
             <Footer/>

src/components/DEBUG/DEBUG.css

@@ -0,0 +1,11 @@
+.container {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 300px;
+}
+
+button {
+    margin: 10px;
+    cursor: pointer;
+}

src/components/DEBUG/DEBUG.tsx

@@ -0,0 +1,33 @@
+import {FC} from "react";
+import {useNavigate} from 'react-router-dom';
+import {NavigateOptions} from "react-router/dist/lib/context";
+import './DEBUG.css'
+
+const DEBUG: FC = () =>  {
+    const navigate = useNavigate()
+    const handleClick = (link: string, options: NavigateOptions) => {
+        navigate(link, options);
+    }
+
+    return (
+        <div className='container'>
+            <button onClick={() => handleClick('/verify-email', {
+                state: {
+                    email: 'akastijn@alttd.com'
+                }
+            })}>Verify Email Debug</button>
+            <button onClick={() => handleClick('/thank-you', {
+                state: {
+                    formData: {
+                        row1: 'This is some text',
+                        row2: 'This is text as well',
+                        row3: 'And finally, here is even more text!'
+                    }
+                }
+            })}>Thank You Debug</button>
+            {/*<button onClick={() => handleClick('/page3', {})}>Page 3</button>*/}
+        </div>
+    )
+}
+
+export default DEBUG;