[Issue #15] Keep the game (tictactoe) only, put it to the centr of the page, get rid of the rest of components

src/App.test.tsx

@@ -1,7 +1,8 @@
-import { render, screen } from '@testing-library/react'
-import App from './App'
+import { render, screen } from '@testing-library/react';
+import App from './App';
 
 test('renders the get started heading', () => {
-  render(<App />)
-  expect(screen.getByText('Get started')).toBeInTheDocument()
-})
+  render(<App />);
+  const headingElement = screen.getByText('Get started');
+  expect(headingElement).toBeInTheDocument();
+});

src/App.tsx

@@ -1,43 +1,14 @@
-import { useState } from 'react'
-import reactLogo from './assets/react.svg'
-import viteLogo from './assets/vite.svg'
-import heroImg from './assets/hero.png'
-import './App.css'
-
-// Import the tic-tac-toe game component
-import TicTacToe from './components/TicTacToe'
+import React from 'react';
+import './App.css';
+import TicTacToe from './components/TicTacToe';
 
 function App() {
-  const [count, setCount] = useState(0)
-
   return (
-    <>
-      <section id="center">
-        <div className="hero">
-          <img src={heroImg} className="base" width="170" height="179" alt="" />
-          <img src={reactLogo} className="framework" alt="React logo" />
-          <img src={viteLogo} className="vite" alt="Vite logo" />
-        </div>
-        <div>
-          <h1>Get started</h1>
-          <p>
-            Edit <code>src/App.tsx</code> and save to test <code>HMR</code>
-          </p>
-        </div>
-        <button
-          className="counter"
-          onClick={() => setCount((count) => count + 1)}
-        >
-          Count is {count}
-        </button>
-      </section>
-
-      <div className="ticks"></div>
-
-      {/* Add the tic-tac-toe game component */}
+    <div className="app">
+      <h1>Get started</h1>
       <TicTacToe />
-    </>
+    </div>
   )
 }
 
-export default App
+export default App;