SWOT Analysis Template Create SWOT analyses with organized Strengths, Weaknesses, Opportunities, and Threats quadrants.

The tool uses React to manage state and handle user interactions, storing data in a JavaScript object with four properties: strengths, weaknesses, opportunities, and threats. Each property is an array of objects containing an id and text, generated when the user adds a new item to a category. The `addItem` function trims the input text and checks if it's not empty before adding it to the corresponding array. The `removeItem` function filters out the item with the matching id from the array.

When exporting the analysis as text, the tool uses a simple algorithm to concatenate the title, category headers, and item texts into a single string. It utilizes the `navigator.clipboard.writeText` API to copy this text to the user's clipboard. The `exportText` function iterates over the categories, appending the label, a line of dashes, and the item texts to the result string.

The tool's UI is built using CSS Grid, with a 1x2 or 2x2 grid layout depending on the screen size. Each category is represented by a glass card with a distinct background color and icon: green for strengths, red for weaknesses, blue for opportunities, and orange for threats. The colors are defined as custom properties in the CSS code, allowing for easy modification if needed.

The tool stores its state in three main variables: `title`, `data`, and `inputs`. The `title` variable holds the project or company name, while `data` contains the swot analysis items grouped by category. The `inputs` object stores the current text input for each category, allowing the user to add new items. When the user presses Enter or clicks the "+" button, the `addItem` function is called with the corresponding category as an argument.

The categories are defined in a JavaScript array of objects, where each object contains the key, label, color, background color, and icon for a specific category. This data structure makes it easy to add or remove categories if needed, without modifying the rest of the code. The tool uses TypeScript to define the types for its variables and functions, ensuring better code quality and maintainability.