xevion/bus-reminder
1
0
Fork 0
mirror of https://github.com/Xevion/bus-reminder.git synced 2025-12-07 03:14:35 -06:00
Code Issues Packages Projects Releases Wiki Activity

Use common Layout component, place common title in Layout

Browse Source
This commit is contained in:
Xevion
2023-09-05 14:46:04 -05:00
parent ac23bf774a
commit 3d4e82bc45
4 changed files with 22 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/Layout.tsx
View File

@@ -1,5 +1,6 @@
import { FunctionComponent } from 'react';
import { classNames } from '@/utils/client';
import Head from 'next/head';
export type LayoutProps = {
className?: string;
@@ -8,6 +9,10 @@ export type LayoutProps = {
const Layout: FunctionComponent<LayoutProps> = ({ children, className }) => {
return (
<>
<Head>
<title>bus-reminder</title>
</Head>
<div
className={classNames(
'flex text-zinc-200 bg-zinc-900 min-h-screen h-full flex-col justify-center py-12 sm:px-6 lg:px-8',
@@ -16,6 +21,7 @@ const Layout: FunctionComponent<LayoutProps> = ({ children, className }) => {
>
{children}
</div>
</>
);
};

4
src/pages/_document.tsx
View File

@@ -3,9 +3,7 @@ import { Html, Head, Main, NextScript } from 'next/document';
export default function Document() {
return (
<Html className="h-full bg-gray-50">
<Head>
<title>bus-reminder</title>
</Head>
<Head />
<body className="h-full">
<Main />
<NextScript />

5
src/pages/index.tsx
View File

@@ -13,6 +13,7 @@ import { fetchConfiguration } from '@/db';
import { useForm } from 'react-hook-form';
import { ConfigurationSchema } from '@/timing';
import { useRouter } from 'next/router';
import Layout from '@/components/Layout';
type Props = {
config: string;
@@ -101,7 +102,7 @@ const IndexPage: NextPage<Props> = ({ config }) => {
}
return (
<div className="flex text-zinc-200 bg-zinc-900 min-h-screen max-h-screen h-full flex-col justify-center py-12 sm:px-6 lg:px-8">
<Layout className="max-h-screen">
<div className="px-5 sm:mx-auto sm:w-full sm:max-w-4xl">
<div className="bg-black/ py-8 px-4 shadow sm:rounded-lg sm:px-10">
<form onSubmit={handleSubmit(onSubmit)}>
@@ -151,7 +152,7 @@ const IndexPage: NextPage<Props> = ({ config }) => {
</form>
</div>
</div>
</div>
</Layout>
);
};

6
src/pages/login.tsx
View File

@@ -2,6 +2,7 @@ import { NextPage } from 'next';
import { useForm } from 'react-hook-form';
import { useState } from 'react';
import { useRouter } from 'next/router';
import Layout from '@/components/Layout';
const LoginPage: NextPage = () => {
type FormProps = { token: string };
@@ -11,6 +12,7 @@ const LoginPage: NextPage = () => {
async function onSubmit(data: FormProps) {
const response = await fetch(`/api/check?key=${data.token}`);
if (response.status === 200) {
setError(false);
router.push({ pathname: '/', query: { key: data.token } }).then();
@@ -18,7 +20,7 @@ const LoginPage: NextPage = () => {
}
return (
<div className="flex bg-zinc-900 min-h-screen h-full flex-col justify-center py-12 sm:px-6 lg:px-8">
<Layout>
<div className="mt-8 sm:mx-auto sm:w-full sm:max-w-md">
<div className="bg-black/ py-8 px-4 shadow sm:rounded-lg sm:px-10">
<form className="space-y-6" onSubmit={handleSubmit(onSubmit)}>
@@ -52,7 +54,7 @@ const LoginPage: NextPage = () => {
</form>
</div>
</div>
</div>
</Layout>
);
};