xevion/bus-reminder
1
0
Fork 0
mirror of https://github.com/Xevion/bus-reminder.git synced 2025-12-07 18:06:31 -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

22
src/components/Layout.tsx
View File

@@ -1,5 +1,6 @@
import { FunctionComponent } from 'react'; import { FunctionComponent } from 'react';
import { classNames } from '@/utils/client'; import { classNames } from '@/utils/client';
import Head from 'next/head';
export type LayoutProps = { export type LayoutProps = {
className?: string; className?: string;
@@ -8,14 +9,19 @@ export type LayoutProps = {
const Layout: FunctionComponent<LayoutProps> = ({ children, className }) => { const Layout: FunctionComponent<LayoutProps> = ({ children, className }) => {
return ( return (
<div <>
className={classNames( <Head>
'flex text-zinc-200 bg-zinc-900 min-h-screen h-full flex-col justify-center py-12 sm:px-6 lg:px-8', <title>bus-reminder</title>
className </Head>
)} <div
> className={classNames(
{children} 'flex text-zinc-200 bg-zinc-900 min-h-screen h-full flex-col justify-center py-12 sm:px-6 lg:px-8',
</div> 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() { export default function Document() {
return ( return (
<Html className="h-full bg-gray-50"> <Html className="h-full bg-gray-50">
<Head> <Head />
<title>bus-reminder</title>
</Head>
<body className="h-full"> <body className="h-full">
<Main /> <Main />
<NextScript /> <NextScript />

5
src/pages/index.tsx
View File

@@ -13,6 +13,7 @@ import { fetchConfiguration } from '@/db';
import { useForm } from 'react-hook-form'; import { useForm } from 'react-hook-form';
import { ConfigurationSchema } from '@/timing'; import { ConfigurationSchema } from '@/timing';
import { useRouter } from 'next/router'; import { useRouter } from 'next/router';
import Layout from '@/components/Layout';
type Props = { type Props = {
config: string; config: string;
@@ -101,7 +102,7 @@ const IndexPage: NextPage<Props> = ({ config }) => {
} }
return ( 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="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"> <div className="bg-black/ py-8 px-4 shadow sm:rounded-lg sm:px-10">
<form onSubmit={handleSubmit(onSubmit)}> <form onSubmit={handleSubmit(onSubmit)}>
@@ -151,7 +152,7 @@ const IndexPage: NextPage<Props> = ({ config }) => {
</form> </form>
</div> </div>
</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 { useForm } from 'react-hook-form';
import { useState } from 'react'; import { useState } from 'react';
import { useRouter } from 'next/router'; import { useRouter } from 'next/router';
import Layout from '@/components/Layout';
const LoginPage: NextPage = () => { const LoginPage: NextPage = () => {
type FormProps = { token: string }; type FormProps = { token: string };
@@ -11,6 +12,7 @@ const LoginPage: NextPage = () => {
async function onSubmit(data: FormProps) { async function onSubmit(data: FormProps) {
const response = await fetch(`/api/check?key=${data.token}`); const response = await fetch(`/api/check?key=${data.token}`);
if (response.status === 200) { if (response.status === 200) {
setError(false); setError(false);
router.push({ pathname: '/', query: { key: data.token } }).then(); router.push({ pathname: '/', query: { key: data.token } }).then();
@@ -18,7 +20,7 @@ const LoginPage: NextPage = () => {
} }
return ( 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="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"> <div className="bg-black/ py-8 px-4 shadow sm:rounded-lg sm:px-10">
<form className="space-y-6" onSubmit={handleSubmit(onSubmit)}> <form className="space-y-6" onSubmit={handleSubmit(onSubmit)}>
@@ -52,7 +54,7 @@ const LoginPage: NextPage = () => {
</form> </form>
</div> </div>
</div> </div>
</div> </Layout>
); );
}; };