Lovable Prompt Creator - AI Prompt Generator

PROJECT SETUP
Create a new project directory named "CursorMiddleFinger". Inside this directory, organize your files as follows:
- /src
  - /components
    - CursorComponent.js
  - /styles
    - main.css
  - App.js
  - index.js
- /tests
  - CursorComponent.test.js
- package.json

This structure allows for easy management of components, styles, and tests, promoting a clean separation of concerns.

DESIGN REQUIREMENTS
- Visual Style: minimalist - Clean, simple design with plenty of white space, minimal color palette, and focus on typography
- Color Mode: Light theme with dark text on light backgrounds
- Primary Color: #1978E5 (accent for buttons, links, highlights)
- Typography: Use Inter from Google Fonts for headings, Inter for body text and UI elements
- Border Radius: 8px (moderately rounded) for buttons, cards, and inputs

CORE COMPONENTS
1. CursorComponent: This is the main component that renders the middle finger cursor. It should handle mouse events to change the cursor style and provide user feedback.
2. Button: A reusable button component that uses the primary color and border radius for styling.
3. Tooltip: A small component that displays a message when the user interacts with the cursor.

IMPLEMENTATION APPROACH
1. Install dependencies:
   - Run `npm install react react-dom` to set up the React environment.
   
2. Create the `CursorComponent.js` file:
   ```javascript
   import React from 'react';
   import './CursorComponent.css';

   const CursorComponent = () => {
       return (
           <div className="cursor-container">
               <div className="middle-finger-cursor" />
               <button className="custom-button">Click Me!</button>
           </div>
       );
   };

   export default CursorComponent;
   ```

3. Style the cursor in `CursorComponent.css`:
   ```css
   .cursor-container {
       position: relative;
       width: 100%;
       height: 100vh;
       background-color: white;
   }

   .middle-finger-cursor {
       cursor: url('path_to_middle_finger_cursor.png'), auto; /* Use an image for the custom cursor */
   }

   .custom-button {
       background-color: #1978E5;
       border: none;
       border-radius: 8px;
       color: white;
       padding: 10px 20px;
       font-family: 'Inter', sans-serif;
       cursor: pointer;
   }
   ```

ARCHITECTURE CONSIDERATIONS
The application follows a component-based architecture using React. Each UI element is encapsulated in its own component, allowing for reusability and easier testing. The main `App.js` file serves as the entry point, rendering the `CursorComponent`.

ERROR HANDLING
Implement basic error handling by using try-catch blocks around event handlers and ensuring that any asynchronous operations are handled properly. Use console.error to log any issues that arise during rendering or event handling.

TESTING STRATEGY
1. Use Jest and React Testing Library for unit testing the components.
2. Write tests in `CursorComponent.test.js` to verify that the CursorComponent renders correctly and that the button click event works as intended.
3. Example test case:
   ```javascript
   import { render, screen } from '@testing-library/react';
   import CursorComponent from './CursorComponent';

   test('renders middle finger cursor', () => {
       render(<CursorComponent />);
       const buttonElement = screen.getByText(/click me!/i);
       expect(buttonElement).toBeInTheDocument();
   });
   ```

This approach ensures that the code is clean, maintainable, and adheres to best practices for building a Cursor-compatible project.