rzmk/learnhouse
1
0
Fork 0
mirror of https://github.com/rzmk/learnhouse.git synced 2025-12-19 04:19:25 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: init login page

Browse source
This commit is contained in:
swve 2022-09-21 23:09:47 +02:00
parent fcd281d1d6
commit 920339b5fd
11 changed files with 107 additions and 25 deletions
Download patch file Download diff file Expand all files Collapse all files

12
front/pages/components/auth/HeaderProfileBox.tsx
View file

@ -1,12 +0,0 @@
import React from "react";
import styled from "styled-components";
export const HeaderProfileBox = () => {
return <ProfileArea>HeaderProfileBox</ProfileArea>;
};
const ProfileArea = styled.div`
display: flex;
place-items: stretch;
place-items: center;
`;

8
front/pages/components/ui/header.tsx
View file

@ -1,8 +0,0 @@
import React from 'react'
import { Menu } from './menu'
export const Header = () => {
return (
<div><Menu></Menu></div>
)
}

42
front/pages/components/ui/layout.tsx
View file

@ -1,42 +0,0 @@
import React from "react";
import Head from "next/head";
import { Header } from "./header";
import styled from "styled-components";
const Layout = (props: any) => {
return (
<div>
<Head>
<title>{props.title}</title>
<meta name="description" content={props.description} />
<link rel="icon" href="/favicon.ico" />
</Head>
<Header></Header>
<Main className="min-h-screen">{props.children}</Main>
<Footer>
<a href="" target="_blank" rel="noopener noreferrer">
Powered by <img src="/learnhouse_logo.png" alt="Learnhouse Logo" />
</a>
</Footer>
</div>
);
};
const Main = styled.main`
min-height: 100vh;
`;
const Footer = styled.footer`
display: flex;
justify-content: center;
margin: 20px;
font-size: 16px;
img{
width: 100px;
display: inline;
}
`;
export default Layout;

97
front/pages/components/ui/menu.tsx
View file

@ -1,97 +0,0 @@
import React from "react";
import styled from "styled-components";
import { HeaderProfileBox } from "../auth/HeaderProfileBox";
export const Menu = () => {
return (
<GlobalHeader>
<LogoArea>
<Logo>
<img src="./learnhouse_logo.png" alt="" />
</Logo>
<div id="accounts"></div>
</LogoArea>
<SearchArea>
<Search>
<SearchInput placeholder="find something" type="text" />
</Search>
</SearchArea>
<MenuArea>
<ul>
<li>Courses </li>
<li>Collections</li>
<li>Activity</li>
<li>More</li>
</ul>
</MenuArea>
<HeaderProfileBox></HeaderProfileBox>
</GlobalHeader>
);
};
const GlobalHeader = styled.div`
display: flex;
height: 60px;
background: #ffffff;
box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.03);
`;
const LogoArea = styled.div`
display: flex;
place-items: stretch;
`;
const Logo = styled.div`
display: flex;
place-items: center;
padding-left: 20px;
img {
width: 100px;
}
`;
const SearchArea = styled.div`
display: flex;
place-items: stretch;
flex-grow: 2;
`;
const Search = styled.div`
display: flex;
place-items: center;
padding-left: 20px;
width: auto;
`;
const SearchInput = styled.input`
box-shadow: inset 5px 6px 16px rgba(0, 0, 0, 0.01);
background: rgb(244 242 242 / 35%);
border-radius: 6px;
height: 50%;
border: none;
margin-top: 20px;
margin-bottom: 20px;
padding-left: 10px;
color: #52525220;
`;
const MenuArea = styled.div`
display: flex;
place-items: stretch;
flex-grow: 1;
ul {
display: flex;
place-items: center;
list-style: none;
padding-left: 20px;
li {
padding-right: 20px;
font-size: 16px;
font-weight: 500;
color: #525252;
}
}
`;

7
front/pages/components/ui/styles/title.tsx
View file

@ -1,7 +0,0 @@
import styled from "styled-components";
export const Title = styled.h1`
font-size: 1.5em;
padding-left: 20px;
font-weight: 500;
`;

4
front/pages/index.tsx
View file

@ -1,6 +1,6 @@
import type { NextPage } from "next";
import { Title } from "./components/ui/styles/title";
import Layout from "./components/ui/layout";
import { Title } from "../components/ui/styles/title";
import Layout from "../components/ui/layout";
const Home: NextPage = () => {
return (

39
front/pages/login.tsx Normal file
View file

@ -0,0 +1,39 @@
import React from "react";
import Layout from "../components/ui/layout";
import { Title } from "../components/ui/styles/title";
const Login = () => {
const [email, setEmail] = React.useState("");
const [password, setPassword] = React.useState("");
const handleSubmit = (e: any) => {
e.preventDefault();
console.log(email, password);
};
const handleEmailChange = (e: any) => {
setEmail(e.target.value);
};
const handlePasswordChange = (e: any) => {
setPassword(e.target.value);
};
return (
<div>
<Layout>
<Title>Login</Title>
<form>
<input onChange={handleEmailChange} type="text" placeholder="email" />
<input onChange={handlePasswordChange} type="password" placeholder="password" />
<button onClick={handleSubmit} type="submit">
Login
</button>
</form>
</Layout>
</div>
);
};
export default Login;

12
front/pages/signup.tsx Normal file
View file

@ -0,0 +1,12 @@
import React from "react";
import Layout from "../components/ui/layout";
import { Title } from "../components/ui/styles/title";
const SignUp = () => {
return <div>
<Layout>
<Title>Sign up </Title>
</Layout>
</div>;
};
export default SignUp;