From 596964fddfa015c1937684f14bbbef5148d5575c Mon Sep 17 00:00:00 2001
From: QiShaoXuan <qishaoxuan777@gmail.com>
Date: Wed, 12 Oct 2022 10:14:58 +0800
Subject: [PATCH] feat: change layout

---
 src/components/Header/index.tsx | 11 +++++++++++
 src/pages/_app.tsx              |  1 -
 src/pages/index.tsx             | 33 +++++++--------------------------
 3 files changed, 18 insertions(+), 27 deletions(-)
 create mode 100644 src/components/Header/index.tsx

diff --git a/src/components/Header/index.tsx b/src/components/Header/index.tsx
new file mode 100644
index 0000000000..63dccb58a2
--- /dev/null
+++ b/src/components/Header/index.tsx
@@ -0,0 +1,11 @@
+import React from 'react';
+import { styled } from '@/styles';
+
+const StyledHeader = styled('div')({
+  height: '60px',
+  width: '100vh',
+  borderBottom: '1px solid gray',
+});
+export const Header = () => {
+  return <StyledHeader>Here is header</StyledHeader>;
+};
diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
index a74b017164..7b41f8c263 100644
--- a/src/pages/_app.tsx
+++ b/src/pages/_app.tsx
@@ -1,6 +1,5 @@
 import type { AppProps } from 'next/app';
 import dynamic from 'next/dynamic';
-
 import '../../public/globals.css';
 
 const ThemeProvider = dynamic(() => import('@/styles/themeProvider'), {
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 4bda97e6c9..d98d80e40f 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -1,10 +1,13 @@
 import type { NextPage } from 'next';
 import { styled, useTheme } from '@/styles';
+import { Header } from '@/components/Header';
+
 import '@/components/simple-counter';
 
-const Button = styled('div')(({ theme }) => {
+const StyledEditorContainer = styled('div')(({ theme }) => {
   return {
-    color: theme.colors.primary,
+    width: '720px',
+    margin: '78px auto 0',
   };
 });
 
@@ -12,30 +15,8 @@ const Home: NextPage = () => {
   const { changeMode, mode } = useTheme();
   return (
     <div>
-      <Button>A button use the theme styles</Button>
-      <simple-counter name="A counter created by web component" />
-      <p>current mode {mode}</p>
-      <button
-        onClick={() => {
-          changeMode('light');
-        }}
-      >
-        light
-      </button>
-      <button
-        onClick={() => {
-          changeMode('dark');
-        }}
-      >
-        dark
-      </button>
-      <button
-        onClick={() => {
-          changeMode('auto');
-        }}
-      >
-        auto
-      </button>
+      <Header />
+      <StyledEditorContainer></StyledEditorContainer>
     </div>
   );
 };