Refactor folders structure and decouple components

CHANGELOG.md

@@ -1,9 +1,8 @@
 ## [1.9.3](https://github.com/vault-developer/event-loop-explorer/compare/v1.9.2...v1.9.3) (2024-11-22)
 
-
 ### Bug Fixes
 
-* update isMobile function ([ed15f5e](https://github.com/vault-developer/event-loop-explorer/commit/ed15f5e9a34b3c183317c20f1a0fbea9b159e3e8))
+- update isMobile function ([ed15f5e](https://github.com/vault-developer/event-loop-explorer/commit/ed15f5e9a34b3c183317c20f1a0fbea9b159e3e8))
 
 ## [1.9.2](https://github.com/vault-developer/event-loop-explorer/compare/v1.9.1...v1.9.2) (2024-10-30)
 

src/App.tsx

@@ -1,66 +1,10 @@
-import * as Styled from './App.styled.ts';
-import CallStack from './components/Callstack/Callstack.tsx';
-import Console from './components/Console/Console.tsx';
-import Editor from './components/Editor/Editor.tsx';
-import EventLoop from './components/EventLoop/EventLoop.tsx';
-import MicroTasksQueue from './components/MicroTasksQueue/MicroTasksQueue.tsx';
-import RequestAnimationFrameQueue from './components/RenderCallbacksQueue/RequestAnimationFrameQueue.tsx';
-import TasksQueue from './components/TasksQueue/TasksQueue.tsx';
-import WebApiQueue from './components/WebApiQueue/WebApiQueue.tsx';
 import StylesProvider from './providers/StylesProvider.tsx';
+import Home from './pages/home/Home.tsx';
 
 function App() {
 	return (
 		<StylesProvider>
-			<Styled.Layout>
-				<Styled.Info>
-					<h2>Event Loop Explorer</h2>
-					<p>
-						If you enjoy this project, please ⭐ it on{' '}
-						<a
-							href="https://github.com/vault-developer/event-loop-explorer"
-							target="_blank"
-							data-testid="github-repo-link"
-						>
-							GitHub
-						</a>
-						!
-					</p>
-				</Styled.Info>
-				<Styled.Editor>
-					<Editor />
-				</Styled.Editor>
-				<Styled.WebApi>
-					<span>Web api</span>
-					<WebApiQueue />
-				</Styled.WebApi>
-				<Styled.RenderCallbacks>
-					<span>RequestAnimationFrame callbacks</span>
-					<RequestAnimationFrameQueue />
-				</Styled.RenderCallbacks>
-				<Styled.CallStack>
-					<span>CallStack</span>
-					<CallStack />
-				</Styled.CallStack>
-				<Styled.Console>
-					<span>Console</span>
-					<Console />
-				</Styled.Console>
-				<Styled.Tasks>
-					<span>Tasks Queue</span>
-					<TasksQueue />
-				</Styled.Tasks>
-				<Styled.Microtasks>
-					<span>Microtasks Queue</span>
-					<MicroTasksQueue />
-				</Styled.Microtasks>
-				<Styled.EventLoop>
-					<p id="eventLoop">Event Loop</p>
-					<Styled.EventLoopBody>
-						<EventLoop />
-					</Styled.EventLoopBody>
-				</Styled.EventLoop>
-			</Styled.Layout>
+			<Home />
 		</StylesProvider>
 	);
 }