[Refactor] Improve architecture

[LauraBeatris]

Requested Changes

• Break the page into more components (Follow the "Show, don't tell" principle)
• Define type definitions on separate files, such as types.ts
• Use the https://github.com/soyguijarro/react-storage-hooks package to store values on local storage, since it deals with the cases where local storage is inactive on the browser.
• Use absolute imports with TS paths
• Use named exports to improve auto-import and nomenclature refactors

Motivation

The current architecture doesn't have a good approach regarding the following points:

• Componentization
• Location of type definitions
• Use of local storage without verifying its existing

And regarding code style:

• Use of relative ones with multiple levels '../../' and making reading difficult
• Use of React.FC instead of explicitly setting the type for the component props. Refer to Remove React.FC from Typescript template facebook/create-react-app#8177 in order to see the downsides of using it

Tasks

• Improve componentization
• Move type definitions to separate files
• Use local storage with hooks packages to avoid accessing it directly
• Use absolute import paths instead of relative ones with multiple levels '../../'
• Remove React.FC and explicitly set the type for the component props. Refer to Remove React.FC from Typescript template facebook/create-react-app#8177 in order to see the downsides of using it