chore: clean up code specifications

src/App.tsx

@@ -1,37 +1,23 @@
-import { useState } from "react";
-import logoVite from "./assets/logo-vite.svg";
-import logoElectron from "./assets/logo-electron.svg";
-import "./App.css";
-import UpdateElectron from "@/components/update-tailwind";
+import { useState } from 'react'
+import UpdateElectron from '@/components/update-tailwind'
+import logoVite from './assets/logo-vite.svg'
+import logoElectron from './assets/logo-electron.svg'
+import './App.css'
 
-console.log(
-  "[App.tsx]",
-  `Hello world from Electron ${process.versions.electron}!`,
-);
+console.log('[App.tsx]', `Hello world from Electron ${process.versions.electron}!`)
 
 function App() {
-  const [count, setCount] = useState(0);
+  const [count, setCount] = useState(0)
   return (
-    <div className="App">
-      <div className="logo-box">
-        <a
-          href="https://github.com/electron-vite/electron-vite-react"
-          target="_blank"
-        >
-          <img
-            src={logoVite}
-            className="logo vite"
-            alt="Electron + Vite logo"
-          />
-          <img
-            src={logoElectron}
-            className="logo electron"
-            alt="Electron + Vite logo"
-          />
+    <div className='App'>
+      <div className='logo-box'>
+        <a href='https://github.com/electron-vite/electron-vite-react' target='_blank'>
+          <img src={logoVite} className='logo vite' alt='Electron + Vite logo' />
+          <img src={logoElectron} className='logo electron' alt='Electron + Vite logo' />
         </a>
       </div>
       <h1>Electron + Vite + React</h1>
-      <div className="card">
+      <div className='card'>
         <button onClick={() => setCount((count) => count + 1)}>
           count is {count}
         </button>
@@ -39,21 +25,16 @@ function App() {
           Edit <code>src/App.tsx</code> and save to test HMR
         </p>
       </div>
-      <p className="read-the-docs">
+      <p className='read-the-docs'>
         Click on the Electron + Vite logo to learn more
       </p>
-      <div className="flex-center">
-        Place static files into the<code>/public</code> folder{" "}
-        <img
-          style={{ width: "5em" }}
-          src="./node.svg"
-          alt="Node logo"
-        />
+      <div className='flex-center'>
+        Place static files into the<code>/public</code> folder <img style={{ width: '5em' }} src='./node.svg' alt='Node logo' />
       </div>
 
       <UpdateElectron />
     </div>
-  );
+  )
 }
 
-export default App;
+export default App

src/components/update/Modal/index.tsx

@@ -23,7 +23,7 @@ const ModalTemplate: React.FC<React.PropsWithChildren<{
   } = props
 
   return (
-    <div className='update-modals'>
+    <div className='update-modal'>
       <div className='update-modal__mask' />
       <div className='update-modal__warp'>
         <div className='update-modal__content' style={{ width }}>

src/main.tsx

@@ -3,7 +3,7 @@ import ReactDOM from 'react-dom/client'
 import App from './App'
 import './samples/node-api'
 import './index.css'
-import "@/components/update-tailwind/tailwind.css";
+import '@/components/update-tailwind/tailwind.css';
 
 ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
   <React.StrictMode>