rushilwiz/compass
1
0
Fork 0
mirror of https://github.com/cssgunc/compass.git synced 2025-04-18 01:40:15 -04:00
Code Issues Actions Packages Projects Releases Wiki Activity

Changed app routing

Browse Source
This commit is contained in:
Meliora Ho 2024-02-07 01:28:08 +00:00
parent 260d67f9a5
commit 280ca20306
8 changed files with 101 additions and 92 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
compass/app/layout.tsx Normal file
View File

@ -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>
)
}

41
compass/app/page.tsx Normal file
View File

@ -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">
&copy; 2024 Compass Center
</p>
</Paper>
</>
);
};

11
compass/components/Button.tsx
View File

@ -8,12 +8,13 @@ type ButtonProps = {
const Button: FunctionComponent<ButtonProps> = ({ children, onClick }) => { const Button: FunctionComponent<ButtonProps> = ({ children, onClick }) => {
return ( return (
<button <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} onClick={onClick}
style={{ // style={{
'--ring-opacity-var': `var(--ring-opacity)`, // '--ring-opacity-var': `var(--ring-opacity)`,
'--ring-color-var': `rgba(var(--ring-color), var(--ring-opacity))` // '--ring-color-var': `rgba(var(--ring-color), var(--ring-opacity))`
}} // }}
> >
{children} {children}
</button> </button>

35
compass/components/Input.tsx
View File

@ -2,25 +2,28 @@ import React, { FunctionComponent, InputHTMLAttributes, ReactNode } from 'react'
type InputProps = InputHTMLAttributes<HTMLInputElement> & { type InputProps = InputHTMLAttributes<HTMLInputElement> & {
icon?: ReactNode; icon?: ReactNode;
title?: ReactNode;
title?:ReactNode;
placeholder?:ReactNode
}; };
const Input: FunctionComponent<InputProps> = ({ icon, ...rest }) => { const Input: FunctionComponent<InputProps> = ({ icon, type, title, placeholder, ...rest }) => {
return ( return (
<div className="mb-4 flex items-center" style={{ '--input-padding': icon ? '0' : 'var(--spacing-3)' }}> <div>
{icon && <span className="p-2">{icon}</span>} <label
<input htmlFor={title}
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' : ''}`} 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"
style={{ >
'--shadow-default': 'var(--shadow-default)', <span className="text-xs font-semibold text-gray-700"> {title} </span>
'--shadow-focus': 'var(--shadow-focus)',
'--border-radius': 'var(--border-radius)', <input
'--border-width': 'var(--border-width)', type={type}
'--font-color': 'var(--font-color)', id={title}
'paddingLeft': 'var(--input-padding)', placeholder={placeholder}
}} className="mt-1 w-full border-none p-0 focus:border-transparent focus:outline-none focus:ring-0 sm:text-sm"
{...rest} />
/> </label>
</div> </div>
); );
}; };

15
compass/components/auth/Page.tsx
View File

@ -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;

15
compass/components/auth/Paper.tsx Normal file
View File

@ -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;

8
compass/pages/_app.tsx
View File

@ -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;

48
compass/pages/index.tsx
View File

@ -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">
&copy; 2024 Compass Center
</p>
</Page>
</>
);
};
export default Home;