Create hooks and implement login pages

2026-09-22 13:38:51 +00:00 · 2023-11-30 11:19:18 +07:00
parent d67dfa685f
commit f09a4bc60d
10 changed files with 290 additions and 27 deletions
@@ -0,0 +1,43 @@
+import styled from 'styled-components';
+
+// Styled
+import CommonInput from '@commonStyle/CommonInput';
+
+const LoginLayout = styled.main`
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  background-color: var(--background-login);
+`;
+
+const StyledLogo = styled.img`
+  width: 250px;
+  height: 250px;
+`;
+
+const TitleStyled = styled.h1`
+  font-size: var(--fs-md);
+`;
+
+const StyledLoginForm = styled.div`
+  background-color: var(--form-color);
+
+  border-radius: var(--radius-sm);
+
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+
+  margin-top: 20px;
+  padding: 30px 50px;
+`;
+
+const FieldInput = styled.input`
+  ${CommonInput}
+
+  width: 300px;
+`
+
+export { LoginLayout, StyledLogo, TitleStyled, StyledLoginForm, FieldInput };