change and update vite to react

packages/renderer/src/app.css

@@ -0,0 +1,10 @@
+.app {
+ background-color: transparent;
+ display: flex;
+ flex-direction: row;
+ height: 100%;
+}
+
+button {
+ font-size: calc(10px + 2vmin);
+}

packages/renderer/src/app.tsx

@@ -1,8 +1,16 @@
-import React, {useState, useCallback} from 'react';
-import Editor from './editor';
-import Previe from './preview';
+import React, {useState} from 'react';
 import './app.css';
 
 const App: React.FC = () => {
- const [doc, setDoc] = useState<string>('# Hello, World\n');
+ const [count, setCount] = useState(0);
+
+ return (
+ <div className="app">
+ <header className="app-header">
+ <p>Hello! Vite + React!</p>
+ <button onClick={() => setCount(count => count + 1)}>count is: {count}</button>
+ </header>
+ </div>
+ );
 };
+export default App;

packages/renderer/src/index.css

@@ -0,0 +1,31 @@
+html,
+body {
+ background-color: transparent;
+ height: 100%;
+}
+
+body {
+ margin: 0;
+ font-family:
+ system-ui,
+ -apple-system,
+ BlinkMacSystemFont,
+ "Segoe UI",
+ Roboto,
+ Oxygen,
+ Ubuntu,
+ Cantarell,
+ "Open Sans",
+ "Helvetica Neue",
+ sans-serif;
+ -webkit-font-smoothing: antialliased;
+ -moz-osx-font-smoothing: grayscale;
+}
+
+code {
+ font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace;
+}
+
+#root {
+ height: 100%;
+}