From 280ca203066bafe5a2b26ecbf2e51150aa3dbdd1 Mon Sep 17 00:00:00 2001
From: Meliora Ho <nho10@fordham.edu>
Date: Wed, 7 Feb 2024 01:28:08 +0000
Subject: [PATCH] Changed app routing
---
compass/app/layout.tsx | 20 +++++++++++++
compass/app/page.tsx | 41 ++++++++++++++++++++++++++
compass/components/Button.tsx | 11 +++----
compass/components/Input.tsx | 35 +++++++++++-----------
compass/components/auth/Page.tsx | 15 ----------
compass/components/auth/Paper.tsx | 15 ++++++++++
compass/pages/_app.tsx | 8 ------
compass/pages/index.tsx | 48 -------------------------------
8 files changed, 101 insertions(+), 92 deletions(-)
create mode 100644 compass/app/layout.tsx
create mode 100644 compass/app/page.tsx
delete mode 100644 compass/components/auth/Page.tsx
create mode 100644 compass/components/auth/Paper.tsx
delete mode 100644 compass/pages/_app.tsx
delete mode 100644 compass/pages/index.tsx
diff --git a/compass/app/layout.tsx b/compass/app/layout.tsx
new file mode 100644
index 0000000..2509089
--- /dev/null
+++ b/compass/app/layout.tsx
@@ -0,0 +1,20 @@
+import '../styles/globals.css';
+import { Metadata } from 'next'
+
+export const metadata: Metadata = {
+ title: 'Login',
+}
+
+export default function RootLayout({
+ // Layouts must accept a children prop.
+ // This will be populated with nested layouts or pages
+ children,
+}: {
+ children: React.ReactNode
+}) {
+ return (
+ <html lang="en">
+ <body>{children}</body>
+ </html>
+ )
+}
\ No newline at end of file
diff --git a/compass/app/page.tsx b/compass/app/page.tsx
new file mode 100644
index 0000000..48493ae
--- /dev/null
+++ b/compass/app/page.tsx
@@ -0,0 +1,41 @@
+// pages/index.tsx
+
+import Button from '@/components/Button';
+import Input from '@/components/Input'
+import InlineLink from '@/components/InlineLink';
+import Paper from '@/components/auth/Paper';
+import { Metadata } from 'next'
+
+export const metadata: Metadata = {
+ title: 'Login',
+}
+
+export default function Page() {
+ return (
+ <>
+ <Paper>
+ <form className="mb-0 mt-6 mb-6 space-y-4 rounded-lg p-4 shadow-lg sm:p-6 lg:p-8 bg-white">
+ <div className="mb-4">
+ <Input type='email' title="Email" placeholder="janedoe@gmail.com" />
+ </div>
+ <div className="mb-6">
+ <Input type='password' title="Password" />
+ </div>
+ <div className="flex flex-col items-left space-y-4">
+ <InlineLink>
+ Forgot password?
+ </InlineLink>
+ <Button>
+ Login
+ </Button>
+
+ </div>
+ </form>
+ <p className="text-center mt-6 text-gray-500 text-xs">
+ © 2024 Compass Center
+ </p>
+ </Paper>
+ </>
+ );
+};
+
diff --git a/compass/components/Button.tsx b/compass/components/Button.tsx
index 4552e14..72c47f9 100644
--- a/compass/components/Button.tsx
+++ b/compass/components/Button.tsx
@@ -8,12 +8,13 @@ type ButtonProps = {
const Button: FunctionComponent<ButtonProps> = ({ children, onClick }) => {
return (
<button
- className="px-4 py-2 font-bold text-white bg-purple-600 rounded hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-opacity-var focus:ring-color-var"
+ // className="px-4 py-2 font-bold text-white bg-purple-600 rounded hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-opacity-var focus:ring-color-var"
+ className="inline-block rounded border border-purple-600 bg-purple-600 px-12 py-3 text-sm font-semibold text-white hover:bg-transparent hover:text-purple-600 focus:outline-none focus:ring active:text-purple-500"
onClick={onClick}
- style={{
- '--ring-opacity-var': `var(--ring-opacity)`,
- '--ring-color-var': `rgba(var(--ring-color), var(--ring-opacity))`
- }}
+ // style={{
+ // '--ring-opacity-var': `var(--ring-opacity)`,
+ // '--ring-color-var': `rgba(var(--ring-color), var(--ring-opacity))`
+ // }}
>
{children}
</button>
diff --git a/compass/components/Input.tsx b/compass/components/Input.tsx
index eace6b4..04d1db0 100644
--- a/compass/components/Input.tsx
+++ b/compass/components/Input.tsx
@@ -2,25 +2,28 @@ import React, { FunctionComponent, InputHTMLAttributes, ReactNode } from 'react'
type InputProps = InputHTMLAttributes<HTMLInputElement> & {
icon?: ReactNode;
+ title?: ReactNode;
+ title?:ReactNode;
+ placeholder?:ReactNode
};
-const Input: FunctionComponent<InputProps> = ({ icon, ...rest }) => {
+const Input: FunctionComponent<InputProps> = ({ icon, type, title, placeholder, ...rest }) => {
return (
- <div className="mb-4 flex items-center" style={{ '--input-padding': icon ? '0' : 'var(--spacing-3)' }}>
- {icon && <span className="p-2">{icon}</span>}
- <input
- className={`shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline ${icon ? 'pl-0' : ''}`}
- style={{
- '--shadow-default': 'var(--shadow-default)',
- '--shadow-focus': 'var(--shadow-focus)',
- '--border-radius': 'var(--border-radius)',
- '--border-width': 'var(--border-width)',
- '--font-color': 'var(--font-color)',
- 'paddingLeft': 'var(--input-padding)',
- }}
- {...rest}
- />
- </div>
+ <div>
+ <label
+ htmlFor={title}
+ className="block overflow-hidden rounded-md border border-gray-200 px-3 py-2 shadow-sm focus-within:border-purple-600 focus-within:ring-1 focus-within:ring-purple-600"
+>
+ <span className="text-xs font-semibold text-gray-700"> {title} </span>
+
+ <input
+ type={type}
+ id={title}
+ placeholder={placeholder}
+ className="mt-1 w-full border-none p-0 focus:border-transparent focus:outline-none focus:ring-0 sm:text-sm"
+ />
+</label>
+</div>
);
};
diff --git a/compass/components/auth/Page.tsx b/compass/components/auth/Page.tsx
deleted file mode 100644
index 0fddda9..0000000
--- a/compass/components/auth/Page.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-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/components/auth/Paper.tsx b/compass/components/auth/Paper.tsx
new file mode 100644
index 0000000..95b9ba0
--- /dev/null
+++ b/compass/components/auth/Paper.tsx
@@ -0,0 +1,15 @@
+import React, { ReactNode } from 'react';
+
+interface PageInterface {
+ children: ReactNode;
+}
+
+const Paper: React.FC<PageInterface> = ({ children }) => {
+ return (
+ <div className="w-full min-h-screen px-4 py-16 bg-gray-100 sm:px-6 lg:px-8">
+ {children}
+ </div>
+ );
+};
+
+export default Paper;
\ No newline at end of file
diff --git a/compass/pages/_app.tsx b/compass/pages/_app.tsx
deleted file mode 100644
index 4642da1..0000000
--- a/compass/pages/_app.tsx
+++ /dev/null
@@ -1,8 +0,0 @@
-import '../styles/globals.css';
-import type { AppProps } from 'next/app';
-
-function MyApp({ Component, pageProps }: AppProps) {
- return <Component {...pageProps} />;
-}
-
-export default MyApp;
\ No newline at end of file
diff --git a/compass/pages/index.tsx b/compass/pages/index.tsx
deleted file mode 100644
index 3eed8e4..0000000
--- a/compass/pages/index.tsx
+++ /dev/null
@@ -1,48 +0,0 @@
-// pages/index.tsx
-
-import Button from '@/components/Button';
-import type { NextPage } from 'next';
-import Head from 'next/head';
-import Input from '@/components/Input'
-import InlineLink from '@/components/InlineLink';
-import Page from '@/components/auth/Page';
-
-const Home: NextPage = () => {
- return (
- <>
- <Head>
- <meta name="viewport" content="width=device-width, initial-scale=1" />
- </Head>
- <Page>
- <form className="bg-white shadow-md rounded px-4 sm:px-8 md:px-12 pt-8 pb-8 mb-4">
- <div className="mb-4">
- <label className="block text-gray-700 text-sm font-bold mb-2" for="username">
- Username
- </label>
- <Input />
- </div>
- <div className="mb-6">
- <label className="block text-gray-700 text-sm font-bold mb-2" for="password">
- Password
- </label>
- <Input />
- </div>
- <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">
- © 2024 Compass Center
- </p>
- </Page>
- </>
- );
-};
-
-export default Home;