From 8269294b84b86a935a4e5b7356ca0746aee55feb Mon Sep 17 00:00:00 2001
From: GAURAV SINHA <sinhagaurav.me@gmail.com>
Date: Sun, 1 Oct 2023 19:30:03 +0530
Subject: [PATCH] refactor

---
 __tests__/components/Footer.test.tsx          |   7 +-
 __tests__/components/Navbar.test.tsx          |   2 +-
 __tests__/pages/login.js                      |  38 ------
 public/assets/{ => icons}/eye.tsx             |   0
 src/components/Footer/Footer.tsx              |  16 ---
 src/components/Footer/index.tsx               |  21 +++
 src/components/InputBox/index.tsx             |   2 +-
 src/components/Layout/index.tsx               |  25 ++++
 .../Navbar/{Navbar.tsx => index.tsx}          |   2 +-
 src/pages/_app.js                             |  13 +-
 src/pages/dashboard/index.tsx                 | 103 +++++++-------
 src/pages/login/index.js                      | 102 --------------
 src/pages/login/index.tsx                     | 128 +++++++++---------
 13 files changed, 175 insertions(+), 284 deletions(-)
 delete mode 100644 __tests__/pages/login.js
 rename public/assets/{ => icons}/eye.tsx (100%)
 delete mode 100644 src/components/Footer/Footer.tsx
 create mode 100644 src/components/Footer/index.tsx
 create mode 100644 src/components/Layout/index.tsx
 rename src/components/Navbar/{Navbar.tsx => index.tsx} (99%)
 delete mode 100644 src/pages/login/index.js

diff --git a/__tests__/components/Footer.test.tsx b/__tests__/components/Footer.test.tsx
index a920cc8..5b65a05 100644
--- a/__tests__/components/Footer.test.tsx
+++ b/__tests__/components/Footer.test.tsx
@@ -1,4 +1,4 @@
-import { Footer } from '@/components/Footer/Footer';
+import Footer from '@/components/Footer/';
 import { render } from '@testing-library/react';
 
 describe('Footer', () => {
@@ -9,7 +9,10 @@ describe('Footer', () => {
 
     it('should have a link to the repo', () => {
         const { container } = render(<Footer />);
-        expect(container.querySelector('a')).toHaveAttribute('href', '#');
+        expect(container.querySelector('a')).toHaveAttribute(
+            'href',
+            'https://github.com/Real-Dev-Squad/tiny-site-frontend'
+        );
     });
 
     it('should have a link to the repo', () => {
diff --git a/__tests__/components/Navbar.test.tsx b/__tests__/components/Navbar.test.tsx
index 5c24100..0dc9e0b 100644
--- a/__tests__/components/Navbar.test.tsx
+++ b/__tests__/components/Navbar.test.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Navbar } from '@/components/Navbar/Navbar';
+import Navbar from '@/components/Navbar/';
 import { render } from '@testing-library/react';
 import '@testing-library/jest-dom';
 
diff --git a/__tests__/pages/login.js b/__tests__/pages/login.js
deleted file mode 100644
index c01cdcd..0000000
--- a/__tests__/pages/login.js
+++ /dev/null
@@ -1,38 +0,0 @@
-import LoginPage from '../../src/pages/login';
-import { render, fireEvent } from '@testing-library/react';
-
-describe('LoginPage', () => {
-    it('should render without throwing an error', function () {
-        const { container } = render(<LoginPage />);
-        expect(container).toMatchSnapshot();
-    });
-    it('should render username input', () => {
-        const { getByLabelText } = render(<LoginPage />);
-        expect(getByLabelText('Username')).toBeInTheDocument();
-        expect(getByLabelText('Username')).toHaveAttribute('type', 'text');
-    });
-    it('should render password input', () => {
-        const { getByLabelText } = render(<LoginPage />);
-        expect(getByLabelText('Password')).toBeInTheDocument();
-        expect(getByLabelText('Password')).toHaveAttribute('type', 'password');
-    });
-    it('should render the `Login` button', () => {
-        const { getByText } = render(<LoginPage />);
-        expect(getByText('Log in')).toBeInTheDocument();
-    });
-    it('should accept valid username that takes only alphanumeric characters and underscore', () => {
-        const { getByLabelText } = render(<LoginPage />);
-        const usernameInput = getByLabelText('Username');
-        usernameInput.value = 'John_doe';
-        expect(usernameInput.value).toBe('John_doe');
-    });
-    it('should not accept invalid username that doesnt take only alphanumeric characters and underscore', () => {
-        const { getByLabelText } = render(<LoginPage />);
-        const input = getByLabelText('Username');
-        fireEvent.change(input, { target: { value: 'valid_username' } });
-        expect(input).toHaveStyle('border-color: `#65a30d');
-
-        fireEvent.change(input, { target: { value: 'invalid-username' } });
-        expect(input).toHaveStyle('border-color: `#ef4444`');
-    });
-});
diff --git a/public/assets/eye.tsx b/public/assets/icons/eye.tsx
similarity index 100%
rename from public/assets/eye.tsx
rename to public/assets/icons/eye.tsx
diff --git a/src/components/Footer/Footer.tsx b/src/components/Footer/Footer.tsx
deleted file mode 100644
index 22f6e7d..0000000
--- a/src/components/Footer/Footer.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import React from 'react';
-
-const Footer: React.FC = () => {
-    return (
-        <div className="bg-gray-200 flex justify-center items-center h-[6vh]">
-            <p className="text-gray-600 text-sm">
-                The contents of this website are deployed from this{' '}
-                <a href="#" target="_blank" rel="noopener noreferrer" className="text-blue-500">
-                    open sourced repo
-                </a>
-            </p>
-        </div>
-    );
-};
-
-export { Footer };
diff --git a/src/components/Footer/index.tsx b/src/components/Footer/index.tsx
new file mode 100644
index 0000000..354a723
--- /dev/null
+++ b/src/components/Footer/index.tsx
@@ -0,0 +1,21 @@
+import React from 'react';
+
+const Footer: React.FC = () => {
+    return (
+        <div className="bg-gray-200 flex justify-center items-center h-[6vh]">
+            <p className="text-gray-600 text-sm text-center">
+                The contents of this website are deployed from this{' '}
+                <a
+                    href="https://github.com/Real-Dev-Squad/tiny-site-frontend"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="text-blue-500"
+                >
+                    open sourced repo
+                </a>
+            </p>
+        </div>
+    );
+};
+
+export default Footer;
diff --git a/src/components/InputBox/index.tsx b/src/components/InputBox/index.tsx
index 08d4311..07cdccf 100644
--- a/src/components/InputBox/index.tsx
+++ b/src/components/InputBox/index.tsx
@@ -1,5 +1,5 @@
 import React, { SetStateAction, useState } from 'react';
-import EyeIcon from '../../../public/assets/eye';
+import EyeIcon from '../../../public/assets/icons/eye';
 import EyeCloseIcon from '../../../public/assets/icons/eyeClose';
 
 type Props = {
diff --git a/src/components/Layout/index.tsx b/src/components/Layout/index.tsx
new file mode 100644
index 0000000..3176696
--- /dev/null
+++ b/src/components/Layout/index.tsx
@@ -0,0 +1,25 @@
+import { FC, ReactNode } from 'react';
+
+import Head from 'next/head';
+import Navbar from '@/components/Navbar';
+import Footer from '@/components/Footer';
+
+type LayoutProps = {
+    title: string;
+    children: ReactNode;
+};
+
+const Layout: FC<LayoutProps> = ({ title, children }) => {
+    return (
+        <div>
+            <Head>
+                <title>{title}</title>
+            </Head>
+            <Navbar />
+            <main className="bg-gray-900 flex flex-col justify-center items-center h-container">{children}</main>
+            <Footer />
+        </div>
+    );
+};
+
+export default Layout;
diff --git a/src/components/Navbar/Navbar.tsx b/src/components/Navbar/index.tsx
similarity index 99%
rename from src/components/Navbar/Navbar.tsx
rename to src/components/Navbar/index.tsx
index 2052a2f..53caef6 100644
--- a/src/components/Navbar/Navbar.tsx
+++ b/src/components/Navbar/index.tsx
@@ -65,4 +65,4 @@ const Navbar: React.FC = () => {
     );
 };
 
-export { Navbar };
+export default Navbar;
diff --git a/src/pages/_app.js b/src/pages/_app.js
index 6375af4..2d8c29f 100644
--- a/src/pages/_app.js
+++ b/src/pages/_app.js
@@ -1,16 +1,5 @@
 import '@/styles/global.css';
-import { Footer } from '@/components/Footer/Footer';
-import { Navbar } from '@/components/Navbar/Navbar';
 
 export default function MyApp({ Component, pageProps }) {
-    return (
-        <div>
-            <title>URL Shortener</title>
-            <Navbar />
-            <div className="bg-gray-900 flex flex-col justify-center items-center h-container">
-                <Component {...pageProps} />
-            </div>
-            <Footer />
-        </div>
-    );
+    return <Component {...pageProps} />;
 }
diff --git a/src/pages/dashboard/index.tsx b/src/pages/dashboard/index.tsx
index 7e52711..dc6d920 100644
--- a/src/pages/dashboard/index.tsx
+++ b/src/pages/dashboard/index.tsx
@@ -2,6 +2,7 @@ import React, { useState } from 'react';
 import CopyIcon from '../../../public/assets/icons/copy';
 import AddIcon from '../../../public/assets/icons/add';
 import ReloadIcon from '../../../public/assets/icons/reload';
+import Layout from '@/components/Layout';
 
 const Dashboard = () => {
     const [url, getUrl] = useState('');
@@ -13,65 +14,67 @@ const Dashboard = () => {
     }
 
     return (
-        <div className="flex flex-col justify-center items-center space-y-4 w-[90%] max-w-3xl md:w-[80%] lg:w-[80%] h-screen">
-            <h1 className="text-4xl text-white font-semibold">URL Shortener</h1>
-            <div className="flex flex-col md:flex-row justify-center items-center space-y-4 md:space-y-0 md:space-x-1 m-4 w-[100%]">
-                <input
-                    type="text"
-                    placeholder="Enter the URL"
-                    className="w-full md:w-[80%] bg-gray-200 md:rounded-l-2xl p-4 md:rounded-none"
-                    value={url}
-                    onChange={(e) => {
-                        getUrl(e.target.value);
-                    }}
-                />
-                <button
-                    className="w-full md:w-auto bg-gray-200 md:rounded-r-2xl px-4 md:px-8 py-4 hover:bg-gray-300 mt-2 md:mt-0 md:rounded-none"
-                    onClick={() => {
-                        const randomString = generateRandomString();
-                        setUrl(`https://rds.li/${randomString}`);
-                    }}
-                >
-                    Generate
-                </button>
-            </div>
-            <div className="flex flex-col md:flex-row justify-center items-center space-y-4 md:space-y-0 md:space-x-1 m-4 w-[98%]">
-                <input
-                    type="text"
-                    placeholder="Copy the URL"
-                    className="w-full md:w-[80%] bg-gray-200 md:rounded-l-2xl p-4 md:rounded-none"
-                    disabled
-                    value={shortUrl}
-                />
-                <div className="flex flex-row justify-center items-center space-x-1">
+        <Layout title="Home | URL Shortener">
+            <div className="flex flex-col justify-center items-center space-y-4 w-[90%] max-w-3xl md:w-[80%] lg:w-[80%] h-screen">
+                <h1 className="text-4xl text-white font-semibold">URL Shortener</h1>
+                <div className="flex flex-col md:flex-row justify-center items-center space-y-4 md:space-y-0 md:space-x-1 m-4 w-[100%]">
+                    <input
+                        type="text"
+                        placeholder="Enter the URL"
+                        className="w-full md:w-[80%] bg-gray-200 md:rounded-l-2xl p-4 md:rounded-none"
+                        value={url}
+                        onChange={(e) => {
+                            getUrl(e.target.value);
+                        }}
+                    />
                     <button
-                        className="w-full md:w-auto bg-gray-200  px-4 md:px-8 py-3 hover:bg-gray-300 mt-2 md:mt-0 md:rounded-none"
+                        className="w-full md:w-auto bg-gray-200 md:rounded-r-2xl px-4 md:px-8 py-4 hover:bg-gray-300 mt-2 md:mt-0 md:rounded-none"
                         onClick={() => {
                             const randomString = generateRandomString();
                             setUrl(`https://rds.li/${randomString}`);
                         }}
                     >
-                        <ReloadIcon />
-                    </button>
-                    <button
-                        className="w-full md:w-auto bg-gray-200 px-4 md:px-8 py-3 hover:bg-gray-300 mt-2 md:mt-0 md:rounded-none"
-                        onClick={() => {
-                            setUrl('');
-                        }}
-                    >
-                        <AddIcon />
-                    </button>
-                    <button
-                        className="w-full md:w-auto bg-gray-200 md:rounded-r-2xl px-4 md:px-8 py-3 hover:bg-gray-300 mt-2 md:mt-0 md:rounded-none"
-                        onClick={() => {
-                            navigator.clipboard.writeText(shortUrl);
-                        }}
-                    >
-                        <CopyIcon />
+                        Generate
                     </button>
                 </div>
+                <div className="flex flex-col md:flex-row justify-center items-center space-y-4 md:space-y-0 md:space-x-1 m-4 w-[98%]">
+                    <input
+                        type="text"
+                        placeholder="Copy the URL"
+                        className="w-full md:w-[80%] bg-gray-200 md:rounded-l-2xl p-4 md:rounded-none"
+                        disabled
+                        value={shortUrl}
+                    />
+                    <div className="flex flex-row justify-center items-center space-x-1">
+                        <button
+                            className="w-full md:w-auto bg-gray-200  px-4 md:px-8 py-3 hover:bg-gray-300 mt-2 md:mt-0 md:rounded-none"
+                            onClick={() => {
+                                const randomString = generateRandomString();
+                                setUrl(`https://rds.li/${randomString}`);
+                            }}
+                        >
+                            <ReloadIcon />
+                        </button>
+                        <button
+                            className="w-full md:w-auto bg-gray-200 px-4 md:px-8 py-3 hover:bg-gray-300 mt-2 md:mt-0 md:rounded-none"
+                            onClick={() => {
+                                setUrl('');
+                            }}
+                        >
+                            <AddIcon />
+                        </button>
+                        <button
+                            className="w-full md:w-auto bg-gray-200 md:rounded-r-2xl px-4 md:px-8 py-3 hover:bg-gray-300 mt-2 md:mt-0 md:rounded-none"
+                            onClick={() => {
+                                navigator.clipboard.writeText(shortUrl);
+                            }}
+                        >
+                            <CopyIcon />
+                        </button>
+                    </div>
+                </div>
             </div>
-        </div>
+        </Layout>
     );
 };
 
diff --git a/src/pages/login/index.js b/src/pages/login/index.js
deleted file mode 100644
index 1a5457a..0000000
--- a/src/pages/login/index.js
+++ /dev/null
@@ -1,102 +0,0 @@
-import React, { useState } from 'react';
-
-const LoginPage = () => {
-    const [isValid, setIsValid] = useState(null);
-    const handleChange = (event) => {
-        const inputValue = event.target.value;
-        const regex = /^[a-zA-Z0-9_]+$/;
-
-        if (regex.test(inputValue)) {
-            setIsValid(true);
-        } else {
-            setIsValid(false);
-        }
-    };
-    return (
-        <div className="flex flex-col w-screen items-center justify-center px-6 py-8 mx-auto h-screen lg:py-0">
-            <div className="flex items-center mb-6 text-2xl font-semibold text-gray-900 dark:text-white">
-                URL Shortener
-            </div>
-            <div className="w-full bg-white rounded-lg shadow dark:border md:mt-0 sm:max-w-md xl:p-0 dark:bg-gray-800 dark:border-gray-700">
-                <div className="p-6 space-y-4 md:space-y-6 sm:p-4">
-                    <form className="space-y-4 md:space-y-6" action="#">
-                        <div>
-                            <label
-                                htmlFor="username"
-                                className="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
-                            >
-                                Username
-                            </label>
-                            <input
-                                type="text"
-                                name="username"
-                                id="username"
-                                onChange={handleChange}
-                                className={`bg-gray-50  text-gray-900 sm:text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500 ${
-                                    isValid && 'border-2 border-green-500'
-                                }
-                                ${isValid !== null && !isValid && 'border-2 border-red-500'}`}
-                                placeholder="John_doe"
-                                required={true}
-                            />
-                        </div>
-                        <div>
-                            <label
-                                htmlFor="password"
-                                className="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
-                            >
-                                Password
-                            </label>
-                            <input
-                                type="password"
-                                name="password"
-                                id="password"
-                                placeholder="••••••••"
-                                className="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
-                                required={true}
-                            />
-                        </div>
-                        <div className="flex items-center justify-between">
-                            <div className="flex items-start">
-                                <div className="flex items-center h-5">
-                                    <input
-                                        id="remember"
-                                        aria-describedby="remember"
-                                        type="checkbox"
-                                        className="w-4 h-4 border border-gray-300 rounded bg-gray-50 focus:ring-3 focus:ring-primary-300 dark:bg-gray-700 dark:border-gray-600 dark:focus:ring-primary-600 dark:ring-offset-gray-800"
-                                        required=""
-                                    />
-                                </div>
-                                <div className="ml-3 text-sm">
-                                    <label htmlFor="remember" className="text-gray-500 dark:text-gray-300">
-                                        Remember me
-                                    </label>
-                                </div>
-                            </div>
-                            <a
-                                href="#"
-                                className="text-sm font-medium text-gray-500 hover:underline dark:text-primary-500"
-                            >
-                                Forgot password?
-                            </a>
-                        </div>
-                        <button
-                            type="submit"
-                            className="w-full bg-gray-200 hover:bg-gray-300 text-dark focus:ring-4 font-medium rounded-lg text-sm px-5 py-2.5 text-center "
-                        >
-                            Log in
-                        </button>
-                        <p className="text-sm font-light text-gray-500 dark:text-gray-400">
-                            Don’t have an account yet?{' '}
-                            <a href="#" className="font-medium text-primary-600 hover:underline dark:text-primary-500">
-                                Sign up
-                            </a>
-                        </p>
-                    </form>
-                </div>
-            </div>
-        </div>
-    );
-};
-
-export default LoginPage;
diff --git a/src/pages/login/index.tsx b/src/pages/login/index.tsx
index 5706fab..afc6aab 100644
--- a/src/pages/login/index.tsx
+++ b/src/pages/login/index.tsx
@@ -1,4 +1,5 @@
 import InputBox from '@/components/InputBox';
+import Layout from '@/components/Layout';
 import { ChangeEvent, SetStateAction, useState } from 'react';
 
 const LoginPage = () => {
@@ -14,72 +15,77 @@ const LoginPage = () => {
         }
     };
     return (
-        <div className="flex flex-col w-screen items-center justify-center px-6 py-8 mx-auto h-screen lg:py-0">
-            <div className="flex items-center mb-6 text-2xl font-semibold text-gray-900 dark:text-white">
-                URL Shortener
-            </div>
-            <div className="w-full bg-white rounded-lg shadow dark:border md:mt-0 sm:max-w-md xl:p-0 dark:bg-gray-800 dark:border-gray-700">
-                <div className="p-6 space-y-4 md:space-y-6 sm:p-4">
-                    <form className="space-y-4 md:space-y-6" action="#">
-                        <div>
-                            <InputBox
-                                type="text"
-                                name="Username"
-                                onChange={handleChange}
-                                placeholder="John_Doe"
-                                className={`bg-gray-50  text-gray-900 sm:text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500 ${usernameBorder}`}
-                                required={true}
-                            />
-                        </div>
-                        <div>
-                            <InputBox
-                                type={'password'}
-                                name="Password"
-                                onChange={(e) => e}
-                                placeholder="••••••••"
-                                className="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
-                                required={true}
-                            />
-                        </div>
-                        <div className="flex items-center justify-between">
-                            <div className="flex items-start">
-                                <div className="flex items-center h-5">
-                                    <input
-                                        id="remember"
-                                        aria-describedby="remember"
-                                        type="checkbox"
-                                        className="w-4 h-4 border border-gray-300 rounded bg-gray-50 focus:ring-3 focus:ring-primary-300 dark:bg-gray-700 dark:border-gray-600 dark:focus:ring-primary-600 dark:ring-offset-gray-800"
-                                    />
-                                </div>
-                                <div className="ml-3 text-sm">
-                                    <label htmlFor="remember" className="text-gray-500 dark:text-gray-300">
-                                        Remember me
-                                    </label>
+        <Layout title="Login | URL Shortener">
+            <div className="flex flex-col w-screen items-center justify-center px-6 py-8 mx-auto h-screen lg:py-0">
+                <div className="flex items-center mb-6 text-2xl font-semibold text-gray-900 dark:text-white">
+                    URL Shortener
+                </div>
+                <div className="w-full bg-white rounded-lg shadow dark:border md:mt-0 sm:max-w-md xl:p-0 dark:bg-gray-800 dark:border-gray-700">
+                    <div className="p-6 space-y-4 md:space-y-6 sm:p-4">
+                        <form className="space-y-4 md:space-y-6" action="#">
+                            <div>
+                                <InputBox
+                                    type="text"
+                                    name="Username"
+                                    onChange={handleChange}
+                                    placeholder="John_Doe"
+                                    className={`bg-gray-50  text-gray-900 sm:text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500 ${usernameBorder}`}
+                                    required={true}
+                                />
+                            </div>
+                            <div>
+                                <InputBox
+                                    type={'password'}
+                                    name="Password"
+                                    onChange={(e) => e}
+                                    placeholder="••••••••"
+                                    className="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
+                                    required={true}
+                                />
+                            </div>
+                            <div className="flex items-center justify-between">
+                                <div className="flex items-start">
+                                    <div className="flex items-center h-5">
+                                        <input
+                                            id="remember"
+                                            aria-describedby="remember"
+                                            type="checkbox"
+                                            className="w-4 h-4 border border-gray-300 rounded bg-gray-50 focus:ring-3 focus:ring-primary-300 dark:bg-gray-700 dark:border-gray-600 dark:focus:ring-primary-600 dark:ring-offset-gray-800"
+                                        />
+                                    </div>
+                                    <div className="ml-3 text-sm">
+                                        <label htmlFor="remember" className="text-gray-500 dark:text-gray-300">
+                                            Remember me
+                                        </label>
+                                    </div>
                                 </div>
+                                <a
+                                    href="#"
+                                    className="text-sm font-medium text-gray-500 hover:underline dark:text-primary-500"
+                                >
+                                    Forgot password?
+                                </a>
                             </div>
-                            <a
-                                href="#"
-                                className="text-sm font-medium text-gray-500 hover:underline dark:text-primary-500"
+                            <button
+                                type="submit"
+                                className="w-full bg-gray-200 hover:bg-gray-300 text-dark focus:ring-4 font-medium rounded-lg text-sm px-5 py-2.5 text-center "
                             >
-                                Forgot password?
-                            </a>
-                        </div>
-                        <button
-                            type="submit"
-                            className="w-full bg-gray-200 hover:bg-gray-300 text-dark focus:ring-4 font-medium rounded-lg text-sm px-5 py-2.5 text-center "
-                        >
-                            Log in
-                        </button>
-                        <p className="text-sm font-light text-gray-500 dark:text-gray-400">
-                            Don’t have an account yet?{' '}
-                            <a href="#" className="font-medium text-primary-600 hover:underline dark:text-primary-500">
-                                Sign up
-                            </a>
-                        </p>
-                    </form>
+                                Log in
+                            </button>
+                            <p className="text-sm font-light text-gray-500 dark:text-gray-400">
+                                Don’t have an account yet?{' '}
+                                <a
+                                    href="#"
+                                    className="font-medium text-primary-600 hover:underline dark:text-primary-500"
+                                >
+                                    Sign up
+                                </a>
+                            </p>
+                        </form>
+                    </div>
                 </div>
             </div>
-        </div>
+        </Layout>
     );
 };