From f8767f875039d008871e24035910730605b14275 Mon Sep 17 00:00:00 2001
From: jaywcjlove <398188662@qq.com>
Date: Tue, 25 Apr 2023 17:17:17 +0800
Subject: [PATCH] feat(page5): add new login component..

---
 .github/workflows/main.yml           |   7 +
 core/src/Block.tsx                   |   2 +-
 pages/page3/src/index.tsx            |   2 +-
 pages/page5/README.md                | 307 +++++++++++++++++++++++++++
 pages/page5/package.json             |  52 +++++
 pages/page5/src/control/Footer.tsx   |   8 +
 pages/page5/src/control/Logo.tsx     |  12 ++
 pages/page5/src/control/Password.tsx |  13 ++
 pages/page5/src/control/Submit.tsx   |  12 ++
 pages/page5/src/control/Title.tsx    |  12 ++
 pages/page5/src/control/Username.tsx |  13 ++
 pages/page5/src/index.css            | 171 +++++++++++++++
 pages/page5/src/index.tsx            | 100 +++++++++
 pages/page5/tsconfig.json            |   8 +
 website/package.json                 |   1 +
 website/src/pages/Example.tsx        |  68 ++----
 website/src/pages/Examples.tsx       |  82 +++++++
 website/src/router.tsx               | 117 +++-------
 18 files changed, 850 insertions(+), 137 deletions(-)
 create mode 100644 pages/page5/README.md
 create mode 100644 pages/page5/package.json
 create mode 100644 pages/page5/src/control/Footer.tsx
 create mode 100644 pages/page5/src/control/Logo.tsx
 create mode 100644 pages/page5/src/control/Password.tsx
 create mode 100644 pages/page5/src/control/Submit.tsx
 create mode 100644 pages/page5/src/control/Title.tsx
 create mode 100644 pages/page5/src/control/Username.tsx
 create mode 100644 pages/page5/src/index.css
 create mode 100644 pages/page5/src/index.tsx
 create mode 100644 pages/page5/tsconfig.json
 create mode 100644 website/src/pages/Examples.tsx

diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml
index 257b119..ddf3ecf 100644
--- a/.github/workflows/main.yml
+++ b/.github/workflows/main.yml
@@ -113,5 +113,12 @@ jobs:
         name: 📦 @react-login-page/page4 publish to NPM
         continue-on-error: true
         working-directory: pages/page4
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
+
+      - run: npm publish --access public
+        name: 📦 @react-login-page/page5 publish to NPM
+        continue-on-error: true
+        working-directory: pages/page5
         env:
           NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
\ No newline at end of file
diff --git a/core/src/Block.tsx b/core/src/Block.tsx
index 6c6c342..b0fd03a 100644
--- a/core/src/Block.tsx
+++ b/core/src/Block.tsx
@@ -18,7 +18,7 @@ export const Block = <Tag extends BlockTagType = 'div'>(props: PropsWithChildren
     const { name, visible = true, tagName = 'div', ...elmProps } = props;
     if (ref.current !== elmProps && name) {
       ref.current = { ...elmProps };
-      const div = visible && elmProps.children ? createElement(tagName, { ...elmProps }, elmProps.children) : null;
+      const div = visible ? createElement(tagName, { ...elmProps }, elmProps.children) : null;
       dispatch({
         blocks: { ...blocks, [name]: div as unknown as Blocks<'div'> },
       });
diff --git a/pages/page3/src/index.tsx b/pages/page3/src/index.tsx
index 702cac2..474d27c 100644
--- a/pages/page3/src/index.tsx
+++ b/pages/page3/src/index.tsx
@@ -29,7 +29,7 @@ const RenderLogin = () => {
   return (
     <Render>
       <div className="login-page3-inner">
-        <aside>
+        <aside className="login-page3-banner">
           {blocks.logo}
           {blocks.banner}
         </aside>
diff --git a/pages/page5/README.md b/pages/page5/README.md
new file mode 100644
index 0000000..3dfe0a8
--- /dev/null
+++ b/pages/page5/README.md
@@ -0,0 +1,307 @@
+# @react-login-page/page5
+
+[![npm version](https://img.shields.io/npm/v/@react-login-page/page5.svg)](https://www.npmjs.com/package/@react-login-page/page5)
+[![Downloads](https://img.shields.io/npm/dm/@react-login-page/page5.svg?style=flat)](https://www.npmjs.com/package/@react-login-page/page5)
+
+<!--rehype:ignore:start-->
+<a href="https://uiwjs.github.io/react-login-page">
+<img width="571" alt="login-page" src="https://user-images.githubusercontent.com/1680273/234231103-0bdceee8-2407-43b3-a2fe-017d344d5764.png">
+</a>
+
+<!--rehype:ignore:end-->
+
+## Install
+
+```bash
+$ npm install @react-login-page/page5 --save
+```
+
+## Usage
+
+```jsx
+import React from 'react';
+import Login from '@react-login-page/page5';
+
+const Demo = () => <Login style={{ height: 380 }} />;
+
+export default Demo;
+```
+
+## Modify Controls
+
+```jsx mdx:preview
+import React from 'react';
+import LoginPage, { Username, Password, Submit, Title, Logo } from '@react-login-page/page5';
+import LoginLogo from 'react-login-page/logo';
+
+const styles = { height: 460 };
+
+const Demo = () => (
+  <div style={styles}>
+    <LoginPage>
+      <Username name="userUserName" />
+      <Password placeholder="请输入密码" name="userPassword" />
+      <Submit>提交</Submit>
+      <Submit type="reset" name="reset">
+        重置
+      </Submit>
+      <Title />
+      <Logo>
+        <LoginLogo />
+      </Logo>
+    </LoginPage>
+  </div>
+);
+
+export default Demo;
+```
+
+## Hide Controls
+
+Use `visible={false}` to hide controls.
+
+```jsx mdx:preview
+import React from 'react';
+import LoginPage, { Reset, Logo, Password, Footer } from '@react-login-page/page5';
+import LoginLogo from 'react-login-page/logo-rect';
+
+const Demo = () => (
+  <LoginPage style={{ height: 480 }}>
+    <Logo>
+      <LoginLogo />
+    </Logo>
+    <Password visible={false} />
+    <Footer>
+      Not a member? <a href="#">Sign up now</a>
+    </Footer>
+  </LoginPage>
+);
+
+export default Demo;
+```
+
+## Add Controls
+
+```jsx mdx:preview
+import React from 'react';
+import LoginPage, { Reset, Logo, Footer, Username, Password, Input } from '@react-login-page/page5';
+import LoginLogo from 'react-login-page/logo-rect';
+
+const imgSrc =
+  'data:image/png;base64,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';
+
+const Demo = () => (
+  <LoginPage style={{ height: 820 }}>
+    <Logo>
+      <LoginLogo />
+    </Logo>
+    <Username rename="subtitle" visible={false} index={0}>
+      欢迎登录页面
+    </Username>
+    {/* hide default username field */}
+    <Username visible={false} />
+    <Username rename="user" index={3} placeholder="修改了 name 字段" />
+    <Username rename="username_rule" visible={false} index={4}>
+      用户名规则
+    </Username>
+    <Password index={1} />
+    <Input name="phone" index={2} placeholder="Phone number">
+      <img src={imgSrc} height={38} />
+    </Input>
+    <Footer>
+      Not a member? <a href="#">Sign up now</a>
+    </Footer>
+  </LoginPage>
+);
+
+export default Demo;
+```
+
+## Modify default control `name`
+
+Modify the string that specifies the **`name`** of the input control by default
+
+1. remove default `name=username` controls
+
+```jsx
+<Username visible={false} />
+```
+
+2. add `name=user` controls
+
+```jsx
+<Username rename="user" index={3} placeholder="修改了 name 字段" />
+```
+
+## Modify Color Style
+
+```jsx mdx:preview
+import React from 'react';
+import Login from '@react-login-page/page5';
+
+const css = {
+  '--login-bg': '#5b6ef4',
+  '--login-color': '#fff',
+  '--login-input': '#333',
+  '--login-input-bg': '#fff',
+  '--login-input-before': 'rgb(62 41 255 / 15%)',
+  '--login-input-after': 'rgb(49 141 255 / 20%)',
+  '--login-btn': '#fff',
+  '--login-btn-bg': '#5b6ef4',
+  '--login-btn-focus': '#3648c6',
+  '--login-btn-hover': '#3648c6',
+  '--login-btn-active': '#5b6ef4',
+};
+
+const Demo = () => <Login style={{ height: 380, ...css }} />;
+
+export default Demo;
+```
+
+Use css variables to override default color values
+
+```css
+.login-page5 {
+  --login-bg: #f45b69;
+  --login-inner-bg: white;
+  --login-color: #fff;
+  --login-input: #333;
+  --login-input-bg: #fff;
+  --login-input-before: rgba(69, 105, 144, 0.15);
+  --login-input-after: rgba(2, 128, 144, 0.2);
+  --login-btn: #fff;
+  --login-btn-bg: #f45b69;
+  --login-btn-focus: #f24353;
+  --login-btn-hover: #f24353;
+  --login-btn-active: #d82a3b;
+}
+```
+
+Custom CSS style overrides
+
+```css
+.login-page5 section button:focus {
+  box-shadow: 0 0 0 2px rgba(0, 142, 240, 0.26);
+}
+.login-page5 section button:hover {
+  background-color: #0070bd;
+}
+.login-page5 section button:active {
+  background-color: #00528a;
+}
+```
+
+## Light & Dark Theme
+
+```css
+[data-color-mode*='dark'] .login-page5,
+.login-page5 {
+  --login-bg: #f45b69;
+  --login-inner-bg: white;
+  --login-color: #fff;
+  --login-input: #333;
+  --login-input-bg: #fff;
+  --login-input-before: rgba(69, 105, 144, 0.15);
+  --login-input-after: rgba(2, 128, 144, 0.2);
+  --login-btn: #fff;
+  --login-btn-bg: #f45b69;
+  --login-btn-focus: #f24353;
+  --login-btn-hover: #f24353;
+  --login-btn-active: #d82a3b;
+}
+[data-color-mode*='light'] .login-page5 {
+  --login-bg: #f45b69;
+  --login-inner-bg: white;
+  --login-color: #fff;
+  --login-input: #333;
+  --login-input-bg: #fff;
+  --login-input-before: rgba(69, 105, 144, 0.15);
+  --login-input-after: rgba(2, 128, 144, 0.2);
+  --login-btn: #fff;
+  --login-btn-bg: #f45b69;
+  --login-btn-focus: #f24353;
+  --login-btn-hover: #f24353;
+  --login-btn-active: #d82a3b;
+}
+```
+
+## API
+
+Components be provided to modify control properties and perform other related functions.
+
+```jsx
+import LoginPage from '@react-login-page/page5';
+// buttons
+import { Reset, Submit } from '@react-login-page/page5';
+// blocks
+import { Logo, Title, Footer } from '@react-login-page/page5';
+// fields
+import { Username, Password } from '@react-login-page/page5';
+// Basic Components
+import { Button, Input } from '@react-login-page/page5';
+// or
+import { Button, Input } from 'react-login-page';
+
+<LoginPage>
+  <Password index={2} />
+</LoginPage>
+
+<Input name="phone" index={1} placeholder="Phone number">
+  <img src="..." height={38} />
+</Input>
+
+// Define the order of `Password` controls
+<Password index={2} />
+
+// Hiding the `Password` control
+<Password visible={false} />
+
+// Add input control
+<Input name="phone" index={1} placeholder="Phone number" />
+
+// Add footer content
+<Footer>
+  Not a member? <a href="#">Sign up now</a>
+</Footer>
+
+// Modify logo image
+<Logo>⚛️</Logo>
+```
+
+Use [dot notation](https://legacy.reactjs.org/docs/jsx-in-depth.html#using-dot-notation-for-jsx-type) components.
+
+```jsx
+import Login from '@react-login-page/page5';
+
+<Login>
+  <Login.Password index={2} />
+</Login>
+
+// Define the order of `Password` controls
+<Login.Password index={2} />
+
+// Hiding the `Password` control
+<Login.Password visible={false} />
+
+// Add footer content
+<Login.Footer>
+  Not a member? <a href="#">Sign up now</a>
+</Login.Footer>
+
+// Modify logo image
+<Login.Logo>⚛️</Login.Logo>
+```
+
+## Contributors
+
+As always, thanks to our amazing contributors!
+
+<a href="https://github.com/uiwjs/react-login-page/graphs/contributors">
+  <img src="https://uiwjs.github.io/react-login-page/CONTRIBUTORS.svg" />
+</a>
+
+Made with [contributors](https://github.com/jaywcjlove/github-action-contributors).
+
+## License
+
+Licensed under the MIT License.
diff --git a/pages/page5/package.json b/pages/page5/package.json
new file mode 100644
index 0000000..12ed70a
--- /dev/null
+++ b/pages/page5/package.json
@@ -0,0 +1,52 @@
+{
+  "name": "@react-login-page/page5",
+  "version": "0.4.0",
+  "description": "Some `react` login pages, which can be used quickly after installation.",
+  "homepage": "https://uiwjs.github.io/react-login-page",
+  "author": "kenny wong <wowohoo@qq.com>",
+  "license": "MIT",
+  "main": "./cjs/index.js",
+  "module": "./esm/index.js",
+  "scripts": {
+    "watch": "tsbb watch src/*.tsx --use-babel",
+    "build": "tsbb build src/*.tsx --use-babel",
+    "test": "tsbb test --env=jsdom",
+    "coverage": "tsbb test --env=jsdom --coverage --bail"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/uiwjs/react-login-page.git"
+  },
+  "files": [
+    "README.md",
+    "src",
+    "esm",
+    "cjs"
+  ],
+  "peerDependencies": {
+    "@babel/runtime": ">=7.11.0",
+    "react": ">=16.8.0",
+    "react-dom": ">=16.8.0"
+  },
+  "dependencies": {
+    "react-login-page": "0.4.0"
+  },
+  "keywords": [
+    "react",
+    "login",
+    "login-page",
+    "login-pages",
+    "react-login",
+    "react-login-page",
+    "editor",
+    "syntax",
+    "ide",
+    "code"
+  ],
+  "jest": {
+    "coverageReporters": [
+      "lcov",
+      "json-summary"
+    ]
+  }
+}
diff --git a/pages/page5/src/control/Footer.tsx b/pages/page5/src/control/Footer.tsx
new file mode 100644
index 0000000..4f660ca
--- /dev/null
+++ b/pages/page5/src/control/Footer.tsx
@@ -0,0 +1,8 @@
+import { Block, BlockProps, BlockTagType } from 'react-login-page';
+
+export const Footer = <Tag extends BlockTagType = 'footer'>(props: BlockProps<Tag | 'footer'>) => {
+  const { name, ...elmProps } = props;
+  return <Block {...elmProps} name="footer" tagName="footer" />;
+};
+
+Footer.displayName = 'BaseLogin.Footer';
diff --git a/pages/page5/src/control/Logo.tsx b/pages/page5/src/control/Logo.tsx
new file mode 100644
index 0000000..16bfd48
--- /dev/null
+++ b/pages/page5/src/control/Logo.tsx
@@ -0,0 +1,12 @@
+import { PropsWithChildren } from 'react';
+import { Block, BlockProps, BlockTagType } from 'react-login-page';
+
+export const Logo = <T extends BlockTagType = 'div'>(props: PropsWithChildren<Partial<BlockProps<T>>>) => {
+  const { name, ...elmProps } = props;
+  if (!elmProps.children) {
+    elmProps.children = '⚛️';
+  }
+  return <Block {...elmProps} name="logo" />;
+};
+
+Logo.displayName = 'BaseLogin.Logo';
diff --git a/pages/page5/src/control/Password.tsx b/pages/page5/src/control/Password.tsx
new file mode 100644
index 0000000..9f7037a
--- /dev/null
+++ b/pages/page5/src/control/Password.tsx
@@ -0,0 +1,13 @@
+import { FC } from 'react';
+import { Input, InputProps } from 'react-login-page';
+
+export const Password: FC<InputProps> = (props) => {
+  const { name, rename, ...elmProps } = props;
+  const nameProps = { name: 'password', rename: name };
+  if (rename) {
+    nameProps.name = rename;
+  }
+  return <Input type="password" placeholder="Password" {...elmProps} {...nameProps} />;
+};
+
+Password.displayName = 'BaseLogin.Password';
diff --git a/pages/page5/src/control/Submit.tsx b/pages/page5/src/control/Submit.tsx
new file mode 100644
index 0000000..09be93f
--- /dev/null
+++ b/pages/page5/src/control/Submit.tsx
@@ -0,0 +1,12 @@
+import { FC } from 'react';
+import { Button, ButtonProps } from 'react-login-page';
+
+export const Submit: FC<Omit<ButtonProps, 'name'>> = (props) => {
+  const { ...elmProps } = props;
+  if (!elmProps.children) {
+    elmProps.children = 'Submit';
+  }
+  return <Button type="submit" name="submit" {...elmProps} />;
+};
+
+Submit.displayName = 'BaseLogin.Submit';
diff --git a/pages/page5/src/control/Title.tsx b/pages/page5/src/control/Title.tsx
new file mode 100644
index 0000000..160da4a
--- /dev/null
+++ b/pages/page5/src/control/Title.tsx
@@ -0,0 +1,12 @@
+import { PropsWithChildren } from 'react';
+import { Block, BlockProps, BlockTagType } from 'react-login-page';
+
+export const Title = <T extends BlockTagType>(props: PropsWithChildren<Partial<BlockProps<T>>>) => {
+  const { name, ...elmProps } = props;
+  if (!elmProps.children) {
+    elmProps.children = 'Login';
+  }
+  return <Block {...elmProps} name="title" />;
+};
+
+Title.displayName = 'BaseLogin.Title';
diff --git a/pages/page5/src/control/Username.tsx b/pages/page5/src/control/Username.tsx
new file mode 100644
index 0000000..1925cfb
--- /dev/null
+++ b/pages/page5/src/control/Username.tsx
@@ -0,0 +1,13 @@
+import { FC } from 'react';
+import { Input, InputProps } from 'react-login-page';
+
+export const Username: FC<InputProps> = (props) => {
+  const { name, rename, ...elmProps } = props;
+  const nameProps = { name: 'username', rename: name };
+  if (rename) {
+    nameProps.name = rename;
+  }
+  return <Input placeholder="Username" spellCheck={false} {...elmProps} {...nameProps} />;
+};
+
+Username.displayName = 'BaseLogin.Username';
diff --git a/pages/page5/src/index.css b/pages/page5/src/index.css
new file mode 100644
index 0000000..590e427
--- /dev/null
+++ b/pages/page5/src/index.css
@@ -0,0 +1,171 @@
+[data-color-mode*='dark'] .login-page5, .login-page5 {
+  --login-bg: #f45b69;
+  --login-inner-bg: white;
+  --login-color: #fff;
+  --login-input: #333;
+  --login-input-bg: #fff;
+  --login-input-before: rgba(69, 105, 144, 0.15);
+  --login-input-after: rgba(2, 128, 144, 0.2);
+  --login-btn: #fff;
+  --login-btn-bg: #f45b69;
+  --login-btn-focus: #f24353;
+  --login-btn-hover: #f24353;
+  --login-btn-active: #d82a3b;
+}
+[data-color-mode*='light'] .login-page5 {
+  --login-bg: #f45b69;
+  --login-inner-bg: white;
+  --login-color: #fff;
+  --login-input: #333;
+  --login-input-bg: #fff;
+  --login-input-before: rgba(69, 105, 144, 0.15);
+  --login-input-after: rgba(2, 128, 144, 0.2);
+  --login-btn: #fff;
+  --login-btn-bg: #f45b69;
+  --login-btn-focus: #f24353;
+  --login-btn-hover: #f24353;
+  --login-btn-active: #d82a3b;
+}
+
+.login-page5 {
+  --gap: 15px;
+  --login-line-height: 1.5;
+  line-height: var(--login-line-height);
+  background-color: var(--login-bg);
+  color: var(--login-color);
+  height: auto;
+  min-height: 100%;
+  display: flex;
+  font-size: 16px;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+}
+.login-page5 header {
+  display: flex;
+  gap: var(--gap);
+  font-size: 26px;
+  font-weight: bold;
+  padding-bottom: 2rem;
+}
+.login-page5 header > div {
+  display: flex;
+  align-items: center;
+}
+.login-page5 header > div > * {
+  display: block;
+}
+
+.login-page5-inner {
+  gap: var(--gap);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  background-color: var(--login-inner-bg);
+  color: var(--login-input);
+  padding: 40px 30px 30px 30px;
+  border-radius: 10px;
+  width: 400px;
+  transition: box-shadow 300ms;
+  box-shadow: 5px 10px 10px rgba(2, 128, 144, 0.2);
+  overflow: hidden;
+  position: relative;
+}
+
+ 
+.login-page5-inner::before,
+.login-page5-inner::after {
+  content: '';
+  position: absolute;
+  width: 600px;
+  height: 600px;
+  border-top-left-radius: 40%;
+  border-top-right-radius: 45%;
+  border-bottom-left-radius: 35%;
+  border-bottom-right-radius: 40%;
+}
+
+.login-page5-inner::before {
+  left: 50%;
+  bottom: -130%;
+  background-color: var(--login-input-before);
+  animation: wawes 6s infinite linear;
+}
+.login-page5-inner::after {
+  left: 45%;
+  bottom: -125%;
+  background-color: var(--login-input-after);
+  animation: wawes 7s infinite linear;
+}
+
+@keyframes wawes {
+  from {
+    transform: rotate(0);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.login-page5-inner > label {
+  display: flex;
+  gap: var(--gap);
+}
+.login-page5-inner > label > input {
+  display: block;
+  border-radius: 5px;
+  font-size: 16px;
+  background: var(--login-input-bg);
+  color: var(--login-input);
+  width: 100%;
+  border: 0;
+  padding: 10px 10px;
+  z-index: 1;
+  position: relative;
+  margin: 0 -10px;
+}
+
+
+.login-page5-inner > label > input:-webkit-autofill {
+  box-shadow: 0 0 0 1000px var(--login-input-bg) inset;
+  color: var(--login-color);
+  -webkit-text-fill-color: var(--login-input) !important;
+}
+
+.login-page5-inner > section {
+  gap: var(--gap);
+  display: flex;
+}
+
+.login-page5-inner > section > button {
+  cursor: pointer;
+  font-size: 16px;
+  min-width: 80px;
+  text-transform: uppercase;
+  border: 0;
+  padding: 8px 12px;
+  margin-left: -5px;
+  border-radius: 5px;
+  background-color: var(--login-btn-bg);
+  color: var(--login-btn);
+  transition: background-color 300ms;
+  position: relative;
+  z-index: 1;
+}
+
+.login-page5-inner > section > button:hover:not(:disabled) {
+  background-color: var(--login-btn-hover);
+}
+.login-page5-inner > section > button:active:not(:disabled) {
+  background-color: var(--login-btn-active);
+}
+.login-page5-inner > section > button:focus:not(:disabled) {
+  box-shadow: 0 0 3px 0 var(--login-btn-focus);
+}
+.login-page5 > footer a {
+  color: rgba(255, 255, 255, 0.6);
+}
+.login-page5 > footer {
+  color: rgba(255, 255, 255, 0.6);
+  padding-top: 2rem;
+}
\ No newline at end of file
diff --git a/pages/page5/src/index.tsx b/pages/page5/src/index.tsx
new file mode 100644
index 0000000..30ebb67
--- /dev/null
+++ b/pages/page5/src/index.tsx
@@ -0,0 +1,100 @@
+import { FC, PropsWithChildren, cloneElement, isValidElement } from 'react';
+import { Render, Provider, Container, useStore } from 'react-login-page';
+import { Username } from './control/Username';
+import { Password } from './control/Password';
+import { Submit } from './control/Submit';
+import { Footer } from './control/Footer';
+import { Logo } from './control/Logo';
+import { Title } from './control/Title';
+
+import './index.css';
+
+export * from 'react-login-page';
+export * from './control/Username';
+export * from './control/Password';
+export * from './control/Submit';
+export * from './control/Title';
+export * from './control/Logo';
+export * from './control/Footer';
+
+const RenderLogin = () => {
+  const { blocks = {}, extra = {}, data } = useStore();
+  const { fields, buttons } = data || { fields: [] };
+  return (
+    <Render>
+      <header>
+        {blocks.logo}
+        {blocks.title}
+      </header>
+      <div className="login-page5-inner">
+        {fields
+          .sort((a, b) => a.index - b.index)
+          .map((item, idx) => {
+            const extraLabel = extra[item.name as keyof typeof extra];
+            if (!item.children && !extraLabel) return null;
+            if (!item.children && extraLabel) return <div key={idx}>{extraLabel}</div>;
+            return (
+              <label key={item.name + idx}>
+                {item.children}
+                {extraLabel}
+              </label>
+            );
+          })}
+        <section>
+          {buttons
+            .sort((a, b) => a.index - b.index)
+            .map((item, idx) => {
+              const child = item.children;
+              if (!isValidElement(child)) return null;
+              return cloneElement(child, {
+                ...child.props,
+                key: item.name + idx,
+              });
+            })}
+        </section>
+      </div>
+      {blocks.footer}
+    </Render>
+  );
+};
+
+const LoginPage: FC<PropsWithChildren<React.HTMLAttributes<HTMLDivElement>>> = ({
+  children,
+  className,
+  ...divProps
+}) => {
+  return (
+    <Provider>
+      <Username />
+      <Password />
+      <Logo />
+      <Title />
+      <Submit />
+      <Container {...divProps} className={`login-page5 ${className || ''}`}>
+        <RenderLogin />
+      </Container>
+      {children}
+    </Provider>
+  );
+};
+
+type LoginComponent = FC<PropsWithChildren<React.HTMLAttributes<HTMLDivElement>>> & {
+  Username: typeof Username;
+  Password: typeof Password;
+  Submit: typeof Submit;
+  Footer: typeof Footer;
+  Logo: typeof Logo;
+  Title: typeof Title;
+};
+
+const Login = LoginPage as LoginComponent;
+
+Login.Username = Username;
+Login.Password = Password;
+Login.Submit = Submit;
+Login.Footer = Footer;
+Login.Logo = Logo;
+Login.Title = Title;
+Login.displayName = 'BaseLoginPage';
+
+export default Login;
diff --git a/pages/page5/tsconfig.json b/pages/page5/tsconfig.json
new file mode 100644
index 0000000..a23d645
--- /dev/null
+++ b/pages/page5/tsconfig.json
@@ -0,0 +1,8 @@
+{
+  "extends": "../../tsconfig",
+  "include": ["src"],
+  "compilerOptions": {
+    "outDir": "cjs",
+    "baseUrl": "."
+  }
+}
diff --git a/website/package.json b/website/package.json
index 33b6767..5d837ac 100644
--- a/website/package.json
+++ b/website/package.json
@@ -27,6 +27,7 @@
     "@react-login-page/page2": "0.4.0",
     "@react-login-page/page3": "0.4.0",
     "@react-login-page/page4": "0.4.0",
+    "@react-login-page/page5": "0.4.0",
     "@uiw/copy-to-clipboard": "^1.0.14",
     "@uiw/react-back-to-top": "^1.1.2",
     "@uiw/react-markdown-preview": "^4.1.11",
diff --git a/website/src/pages/Example.tsx b/website/src/pages/Example.tsx
index 1edb42b..8099d2c 100644
--- a/website/src/pages/Example.tsx
+++ b/website/src/pages/Example.tsx
@@ -1,14 +1,7 @@
-import LoginBase from '@react-login-page/base';
-import LoginLogo from 'react-login-page/logo-rect';
-import LoginPage1 from '@react-login-page/page1';
-import LoginPage2 from '@react-login-page/page2';
-import bannerImage from '@react-login-page/page2/banner-image';
-import LoginPage3 from '@react-login-page/page3';
-import bannerImage3 from '@react-login-page/page3/banner-image';
-import LoginPage4 from '@react-login-page/page4';
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 import { Link } from 'react-router-dom';
 import { mediaStyle } from '../comps/DocsLayout';
+import * as datas from './Examples';
 
 const Wrapper = styled.div`
   display: flex;
@@ -18,7 +11,7 @@ const Wrapper = styled.div`
   ${mediaStyle}
 `;
 
-const Inner = styled(Link)`
+const Inner = styled(Link)<{ magnify?: number }>`
   overflow: hidden;
   display: block;
   position: relative;
@@ -40,54 +33,25 @@ const Inner = styled(Link)`
   }
   & > * {
     transform-origin: top left;
-    transform: scale(0.5);
-    width: 652px;
-    height: 530px;
+    ${({ magnify = 2 }) => css`
+      transform: scale(${326 / (326 * magnify)});
+      width: ${326 * magnify}px;
+      height: ${265 * magnify}px;
+    `}
   }
 `;
 
 export const Example = () => {
   return (
     <Wrapper>
-      <Inner to="/pages/base">
-        <LoginBase>
-          <LoginBase.Logo>
-            <LoginLogo />
-          </LoginBase.Logo>
-        </LoginBase>
-      </Inner>
-      <Inner to="/pages/page1">
-        <LoginPage1>
-          <LoginPage1.Logo>
-            <LoginLogo />
-          </LoginPage1.Logo>
-        </LoginPage1>
-      </Inner>
-      <Inner to="/pages/page2">
-        <LoginPage2>
-          <LoginPage2.Banner>
-            <img src={bannerImage} alt="banner" />
-          </LoginPage2.Banner>
-          <LoginPage2.Logo>
-            <LoginLogo />
-          </LoginPage2.Logo>
-        </LoginPage2>
-      </Inner>
-      <Inner to="/pages/page3">
-        <LoginPage3>
-          <LoginPage3.Banner style={{ backgroundImage: `url(${bannerImage3})` }} />
-          <LoginPage3.Logo>
-            <LoginLogo />
-          </LoginPage3.Logo>
-        </LoginPage3>
-      </Inner>
-      <Inner to="/pages/page4">
-        <LoginPage4>
-          <LoginPage4.Logo>
-            <LoginLogo />
-          </LoginPage4.Logo>
-        </LoginPage4>
-      </Inner>
+      {Object.keys(datas).map((path, key) => {
+        const comps = datas[path as keyof typeof datas];
+        return (
+          <Inner key={key} to={`/pages/${path}`} magnify={comps.magnify}>
+            {comps.children}
+          </Inner>
+        );
+      })}
     </Wrapper>
   );
 };
diff --git a/website/src/pages/Examples.tsx b/website/src/pages/Examples.tsx
new file mode 100644
index 0000000..cdf4f32
--- /dev/null
+++ b/website/src/pages/Examples.tsx
@@ -0,0 +1,82 @@
+import LoginBase from '@react-login-page/base';
+import LoginLogo from 'react-login-page/logo-rect';
+import LoginPage1 from '@react-login-page/page1';
+import LoginPage2 from '@react-login-page/page2';
+import bannerImage from '@react-login-page/page2/banner-image';
+import LoginPage3 from '@react-login-page/page3';
+import bannerImage3 from '@react-login-page/page3/banner-image';
+import LoginPage4 from '@react-login-page/page4';
+import Login5 from '@react-login-page/page5';
+
+interface Example {
+  magnify?: number;
+  children?: JSX.Element;
+}
+
+export const base: Example = {
+  magnify: 1.3,
+  children: (
+    <LoginBase>
+      <LoginBase.Logo>
+        <LoginLogo />
+      </LoginBase.Logo>
+    </LoginBase>
+  ),
+};
+
+export const page1: Example = {
+  children: (
+    <LoginPage1>
+      <LoginPage1.Logo>
+        <LoginLogo />
+      </LoginPage1.Logo>
+    </LoginPage1>
+  ),
+};
+
+export const page2: Example = {
+  magnify: 3.3,
+  children: (
+    <LoginPage2>
+      <LoginPage2.Banner>
+        <img src={bannerImage} alt="banner" />
+      </LoginPage2.Banner>
+      <LoginPage2.Logo>
+        <LoginLogo />
+      </LoginPage2.Logo>
+    </LoginPage2>
+  ),
+};
+
+export const page3: Example = {
+  children: (
+    <LoginPage3>
+      <LoginPage3.Banner style={{ backgroundImage: `url(${bannerImage3})` }} />
+      <LoginPage3.Logo>
+        <LoginLogo />
+      </LoginPage3.Logo>
+    </LoginPage3>
+  ),
+};
+
+export const page4: Example = {
+  magnify: 2.3,
+  children: (
+    <LoginPage4>
+      <LoginPage4.Logo>
+        <LoginLogo />
+      </LoginPage4.Logo>
+    </LoginPage4>
+  ),
+};
+
+export const page5: Example = {
+  magnify: 1.6,
+  children: (
+    <Login5>
+      <Login5.Logo>
+        <LoginLogo />
+      </Login5.Logo>
+    </Login5>
+  ),
+};
diff --git a/website/src/router.tsx b/website/src/router.tsx
index bd8fd30..e47e676 100644
--- a/website/src/router.tsx
+++ b/website/src/router.tsx
@@ -4,10 +4,9 @@ import { Layout } from './comps/Layout';
 import { DocsLayout } from './comps/DocsLayout';
 import { PagesLayout } from './comps/PagesLayout';
 
-import { ReactComponent as Logo } from './svg/logo.svg';
-
 import { Home } from './pages/home';
 import { Preview } from './comps/Preview';
+import * as datas from './pages/Examples';
 
 export interface MenuRouteObject
   extends Omit<IndexRouteObject, 'children' | 'index'>,
@@ -54,99 +53,51 @@ export const routes: MenuRouteObject = {
         },
         {
           path: 'base',
-          lazy: async () => {
-            const Login = await import('@react-login-page/base');
-            const LoginExample = Login.default;
-            return {
-              element: (
-                <Preview disableNav path={() => import('@react-login-page/base/README.md')}>
-                  <LoginExample>
-                    <LoginExample.Logo>
-                      <Logo />
-                    </LoginExample.Logo>
-                  </LoginExample>
-                </Preview>
-              ),
-            };
-          },
+          element: (
+            <Preview disableNav path={() => import('@react-login-page/base/README.md')}>
+              {datas.base.children}
+            </Preview>
+          ),
         },
         {
           path: 'page1',
-          lazy: async () => {
-            const Login = await import('@react-login-page/page1');
-            const LoginExample = Login.default;
-            return {
-              element: (
-                <Preview disableNav path={() => import('@react-login-page/page1/README.md')}>
-                  <LoginExample>
-                    <LoginExample.Logo>
-                      <Logo />
-                    </LoginExample.Logo>
-                  </LoginExample>
-                </Preview>
-              ),
-            };
-          },
+          element: (
+            <Preview disableNav path={() => import('@react-login-page/page1/README.md')}>
+              {datas.page1.children}
+            </Preview>
+          ),
         },
         {
           path: 'page2',
-          lazy: async () => {
-            const Login = await import('@react-login-page/page2');
-            const bannerImage = await import('@react-login-page/page2/banner-image');
-            const LoginExample = Login.default;
-            return {
-              element: (
-                <Preview disableNav path={() => import('@react-login-page/page2/README.md')}>
-                  <LoginExample>
-                    <LoginExample.Banner>
-                      <img src={bannerImage.default} alt="banner" />
-                    </LoginExample.Banner>
-                    <LoginExample.Logo>
-                      <Logo />
-                    </LoginExample.Logo>
-                  </LoginExample>
-                </Preview>
-              ),
-            };
-          },
+          element: (
+            <Preview disableNav path={() => import('@react-login-page/page2/README.md')}>
+              {datas.page2.children}
+            </Preview>
+          ),
         },
         {
           path: 'page3',
-          lazy: async () => {
-            const Login = await import('@react-login-page/page3');
-            const bannerImage = await import('@react-login-page/page3/banner-image');
-            const LoginExample = Login.default;
-            return {
-              element: (
-                <Preview disableNav path={() => import('@react-login-page/page3/README.md')}>
-                  <LoginExample>
-                    <LoginExample.Banner style={{ backgroundImage: `url(${bannerImage.default})` }} />
-                    <LoginExample.Logo>
-                      <Logo />
-                    </LoginExample.Logo>
-                  </LoginExample>
-                </Preview>
-              ),
-            };
-          },
+          element: (
+            <Preview disableNav path={() => import('@react-login-page/page3/README.md')}>
+              {datas.page3.children}
+            </Preview>
+          ),
         },
         {
           path: 'page4',
-          lazy: async () => {
-            const Login = await import('@react-login-page/page4');
-            const LoginExample = Login.default;
-            return {
-              element: (
-                <Preview disableNav path={() => import('@react-login-page/page4/README.md')}>
-                  <LoginExample>
-                    <LoginExample.Logo>
-                      <Logo />
-                    </LoginExample.Logo>
-                  </LoginExample>
-                </Preview>
-              ),
-            };
-          },
+          element: (
+            <Preview disableNav path={() => import('@react-login-page/page4/README.md')}>
+              {datas.page4.children}
+            </Preview>
+          ),
+        },
+        {
+          path: 'page5',
+          element: (
+            <Preview disableNav path={() => import('@react-login-page/page5/README.md')}>
+              {datas.page5.children}
+            </Preview>
+          ),
         },
       ],
     },