From 15ed470a96da5674631d87bf46149471b7bd6040 Mon Sep 17 00:00:00 2001
From: Meliora Ho <nho10@fordham.edu>
Date: Sun, 4 Feb 2024 02:36:24 +0000
Subject: [PATCH] Added page component for auth

---
 compass/components/Page.tsx | 15 +++++++++++++++
 compass/pages/index.tsx     | 16 +++++++++-------
 2 files changed, 24 insertions(+), 7 deletions(-)
 create mode 100644 compass/components/Page.tsx

diff --git a/compass/components/Page.tsx b/compass/components/Page.tsx
new file mode 100644
index 0000000..0fddda9
--- /dev/null
+++ b/compass/components/Page.tsx
@@ -0,0 +1,15 @@
+import React, { ReactNode } from 'react';
+
+interface PageInterface {
+    children: ReactNode;
+}
+
+const Page: React.FC<PageInterface> = ({ children }) => {
+    return (
+        <div className="flex flex-col items-center justify-center min-h-screen bg-gray-100">
+            {children}
+        </div>
+    );
+};
+
+export default Page;
\ No newline at end of file
diff --git a/compass/pages/index.tsx b/compass/pages/index.tsx
index cdd051b..5b6c16e 100644
--- a/compass/pages/index.tsx
+++ b/compass/pages/index.tsx
@@ -5,10 +5,11 @@ import type { NextPage } from 'next';
 import Head from 'next/head';
 import Input from '@/components/Input'
 import InlineLink from '@/components/InlineLink';
+import Page from '@/components/Page';
 
 const Home: NextPage = () => {
     return (
-        <div className="w-full max-w-xs">
+        <Page>
             <form className="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4">
                 <div className="mb-4">
                     <label className="block text-gray-700 text-sm font-bold mb-2" for="username">
@@ -22,19 +23,20 @@ const Home: NextPage = () => {
                     </label>
                     <Input />
                 </div>
-                <div className="flex items-center justify-between">
-                    <Button>
-                        Login
-                    </Button>
+                <div className="flex flex-col items-left space-y-2">
                     <InlineLink>
                         Forgot password?
                     </InlineLink>
+                    <Button>
+                        Login
+                    </Button>
+                    
                 </div>
             </form>
             <p className="text-center text-gray-500 text-xs">
-                &copy;2024 Compass Center
+                &copy; 2024 Compass Center
             </p>
-        </div>
+        </Page>
     );
 };