Resolving Conflict

app/Home.tsx

@@ -1,40 +1,36 @@
 import Header from '../components/custom/header';
 import Footer from '../components/custom/footer';
+import Test from '../components/scripts/Test';
+import MetaMask from '../components/scripts/MetaMask';
 
 export default function Home() {
   return (
-    <>
-      <Header />
-      <div className="bg-gradient-to-b from-blue-900 to-gray-900 min-h-screen pt-16">
     <div className="container mx-auto p-4">
-          <input
+      <div>
-            type="text"
+        <Header />
-            placeholder="Search events..."
+        {/* Other page content */}
-            className="search-bar mt-4 p-2 border border-gray-300 rounded w-full max-w-md mx-auto"
+      </div>
-          />
       <main>
         <section className="mb-8">
-              <h2 className="text-2xl font-semibold text-white mb-4">
+          <h2 className="text-2xl font-semibold mb-4">Featured Events</h2>
-                Featured Events
+          <p className="text-gray-600">No events available at the moment.</p>
-              </h2>
-              <p className="text-gray-300">
-                No events available at the moment.
-              </p>
         </section>
         <section>
-              <h2 className="text-2xl font-semibold text-white mb-4">
+          <h2 className="text-2xl font-semibold mb-4">Upcoming Events</h2>
-                Upcoming Events
+          <ul className="list-disc list-inside">
-              </h2>
-              <ul className="list-disc list-inside text-gray-300">
             <li>Event 1 - Date</li>
             <li>Event 2 - Date</li>
             <li>Event 3 - Date</li>
           </ul>
         </section>
-          </main>
+        <section className="mb-8">
+          <Test />
+        </section>
+        <section className="mb-8">
+          <MetaMask />
+        </section>
         <Footer />
+      </main>
     </div>
-      </div>
-    </>
   );
 }

components/scripts/MetaMask.tsx

@@ -0,0 +1,30 @@
+'use client';
+
+import React, { useEffect } from 'react';
+
+const MetaMask = () => {
+  const isMetaMaskInstalled = () =>
+    typeof (window as { ethereum?: unknown }).ethereum !== 'undefined';
+
+  useEffect(() => {
+    console.log('Print something');
+  }, []);
+
+  // TODO FIX! This is not working :(
+  const metaMaskInstalled = isMetaMaskInstalled();
+  //console.log(metaMaskInstalled);
+
+  return (
+    <div className="text-center p-4">
+      {metaMaskInstalled ? (
+        <button className="bg-blue-500 text-white px-4 py-2 rounded">
+          Connect Wallet
+        </button>
+      ) : (
+        <p>MetaMask not detected</p>
+      )}
+    </div>
+  );
+};
+
+export default MetaMask;

components/scripts/Test.tsx

@@ -0,0 +1,16 @@
+'use client';
+import React, { useEffect } from 'react';
+
+const Test = () => {
+  useEffect(() => {
+    console.log('Print some shit');
+  }, []);
+
+  return (
+    <div>
+      <p>Hellao!</p>
+    </div>
+  );
+};
+
+export default Test;