created register button with no functionality. added it to the page.t…

…sx file and made test cases to ensure it renders and it handles a click event.

app/__tests__/register_bar.test.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import { render, fireEvent } from '@testing-library/react';
+import RegisterButton from "../lib/components/register_button";
+
+test('it renders a button with the correct text', () => {
+  const { getByText } = render(<RegisterButton />);
+
+  // Check if the button with the text 'Register' is rendered
+  const registerButton = getByText('Register');
+  expect(registerButton).toBeInTheDocument();
+});
+
+test('it handles click event', () => {
+  const { getByText } = render(<RegisterButton />);
+  const registerButton = getByText('Register');
+
+  // Simulate a click event on the button
+  fireEvent.click(registerButton);
+
+  // Add your assertion for the click event if needed
+});

app/lib/components/register_button.tsx

@@ -1,27 +1,34 @@
-// components/RegisterButton.js
+'use client'
+import React, { useState } from 'react';
 
-import React from 'react';
+type RegisterButtonProps = {
+  // No props required for this visually matching button
+};
+
+const RegisterButton: React.FC<RegisterButtonProps> = () => {
+  const [isLoading, setIsLoading] = useState(false);
+
+  const handleClick = () => {
+    // No functional logic is required for this visually matching button
+  };
 
-const RegisterButton = () => {
   return (
-    <button className="register-button">
-      Register
-      <style jsx>{`
-        .register-button {
-          background-color: #0070f3;
-          color: #fff;
-          padding: 10px 20px;
-          border: none;
-          border-radius: 5px;
-          cursor: pointer;
-          transition: background-color 0.3s;
-        }
-        .register-button:hover {
-          background-color: #0056b3;
-        }
-      `}</style>
-    </button>
+    <div className="fixed top-0 right-0 m-4">
+      <button
+        onClick={handleClick}
+        className={`${
+          isLoading ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer'
+        } bg-blue-500 text-white w-48 h-12 rounded-full flex justify-center items-center font-semibold text-base shadow-sm disabled:opacity-50`}
+        disabled={isLoading}
+      >
+        {isLoading ? 'Registering...' : 'Register'}
+      </button>
+    </div>
   );
 };
 
 export default RegisterButton;
+
+
+
+

app/page.tsx

@@ -3,7 +3,7 @@ import SearchBar from './lib/components/search_bar';
 import AddNotePage from "./lib/pages/add_note_page";
 import Sidebar from "./lib/components/side_bar";
 import NoteComponent from "./lib/components/note_component";
-
+import RegisterButton from "./lib/components/register_button";
 
 export default function Home() {
   return (
@@ -13,6 +13,7 @@ export default function Home() {
         <h1 className="text-blue-500 text-xl mb-4">Where's Religion?</h1>
         <SearchBar />
         <NoteComponent />
+        <RegisterButton/>
       </div>
     </main>
   );