feat: change layout

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>;
+};

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'), {

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>
   );
 };