auth pages done

WilliamsMata · May 2, 2023 · 3609cf3 · 3609cf3
1 parent 7802770
commit 3609cf3
Show file tree

Hide file tree

Showing 4 changed files with 115 additions and 0 deletions.
diff --git a/src/components/layouts/AuthLayout.tsx b/src/components/layouts/AuthLayout.tsx
@@ -0,0 +1,38 @@
+import { FC, PropsWithChildren } from "react";
+import Head from "next/head";
+import { AppBar, Box, Container, Toolbar, Typography } from "@mui/material";
+import Link from "../Link";
+
+interface Props extends PropsWithChildren {
+  title: string;
+}
+
+export const AuthLayout: FC<Props> = ({ children, title }) => {
+  return (
+    <>
+      <Head>
+        <title>{title}</title>
+      </Head>
+
+      <AppBar>
+        <Toolbar component="nav">
+          <Link href="/" display="flex" alignItems="center">
+            <Typography variant="h6">Teslo | </Typography>
+            <Typography sx={{ ml: 0.5 }}>Shop</Typography>
+          </Link>
+        </Toolbar>
+      </AppBar>
+
+      <Container component="main">
+        <Box
+          display="flex"
+          justifyContent="center"
+          alignItems="center"
+          height="calc(100vh - 160px)"
+        >
+          {children}
+        </Box>
+      </Container>
+    </>
+  );
+};
diff --git a/src/components/layouts/index.ts b/src/components/layouts/index.ts
@@ -1 +1,2 @@
+export * from "./AuthLayout";
 export * from "./ShopLayout";
diff --git a/src/pages/auth/login.tsx b/src/pages/auth/login.tsx
@@ -0,0 +1,37 @@
+import { NextPage } from "next";
+import { Box, Button, TextField, Typography } from "@mui/material";
+import Link from "@/components/Link";
+import { AuthLayout } from "@/components/layouts";
+
+const LoginPage: NextPage = () => {
+  return (
+    <AuthLayout title="Login">
+      <Box sx={{ width: 350, px: 2, py: 1 }}>
+        <Box display="flex" flexDirection="column" gap={2}>
+          <Typography variant="h1">Login</Typography>
+
+          <TextField label="Email" type="email" fullWidth />
+
+          <TextField label="Password" type="password" fullWidth />
+
+          <Button
+            color="secondary"
+            className="circular-btn"
+            size="large"
+            fullWidth
+          >
+            Login
+          </Button>
+
+          <Box display="flex" justifyContent="end">
+            <Link href="/auth/register" underline="always">
+              Create account
+            </Link>
+          </Box>
+        </Box>
+      </Box>
+    </AuthLayout>
+  );
+};
+
+export default LoginPage;
diff --git a/src/pages/auth/register.tsx b/src/pages/auth/register.tsx
@@ -0,0 +1,39 @@
+import { NextPage } from "next";
+import { Box, Button, TextField, Typography } from "@mui/material";
+import Link from "@/components/Link";
+import { AuthLayout } from "@/components/layouts";
+
+const RegisterPage: NextPage = () => {
+  return (
+    <AuthLayout title="Login">
+      <Box sx={{ width: 350, px: 2, py: 1 }}>
+        <Box display="flex" flexDirection="column" gap={2}>
+          <Typography variant="h1">Create account</Typography>
+
+          <TextField label="Name" fullWidth />
+
+          <TextField label="Email" type="email" fullWidth />
+
+          <TextField label="Password" type="password" fullWidth />
+
+          <Button
+            color="secondary"
+            className="circular-btn"
+            size="large"
+            fullWidth
+          >
+            Create account
+          </Button>
+
+          <Box display="flex" justifyContent="end">
+            <Link href="/auth/login" underline="always">
+              Login
+            </Link>
+          </Box>
+        </Box>
+      </Box>
+    </AuthLayout>
+  );
+};
+
+export default RegisterPage;