Frontend

Frontend

The frontend is mainly structured around components, each responsible for specific functions. These components are used within pages, where they are combined to create complete pages with the required functionality. The frontend is developed using TypeScript, React, and Redux, with Tailwind CSS used for styling.

Components

Currently, the frontend consists of seven different components, organized as follows:

button

the tsx-file defines the button's properties and functionality, including its type, size, color, and whether it is disabled. This file also creates the HTML button element <button> that can be used in the page you want to add a button.

the ts-file defines the button's styling using Tailwind CSS, including colors, text sizes, rounded corners, and hover effects. This file does not contain any HTML.

dropdown

The dropdown menu does not have any specific properties of its own. It is mainly used as a placeholder that appears on the screen when the user clicks a button or hovers over it. The dropdown menu contains different buttons and does not require a separate `.ts` file, as it does not have any styling of its own.

inputfield

The InputField component It supports both text and password inputs and handles user interactions through event handlers such as onChange and onKeyDown. This component also uses Tailwind CSS for styling, which is defined directly within the tsx.

popupwindow

PopupWindow consists of a TSX file and a TS file. The TSX file defines the basic structure and functionality of the popup window, providing a default version that can be reused. The TS file defines the styling using Tailwind CSS, allowing the popup window to be customized with different sizes and colors.

The PopupWindowContent folder contains the completed popup windows, which currently consist of two different components: SettingsPopupWindow and WidgetPopupWindow.

The reason these two components are not included in the general TS and TSX files is that they contain different content and functionality. When a new type of popup window is needed, a new component can be created under PopupWindowContent, where its specific content and functionality are defined, while the basic structure and styling are reused from PopupWindow.

sidebar

Sidebar consists of a TSX file and a TS file. The TSX file defines the