npm package: @sartecheasysolutions/common-variables
Description: Common React components for Sartecheasy Solutions projects
Author: Sartecheasy Solutions
Latest version: 1.0.0

# @sartecheasysolutions/common-variables

A React component library with customizable components using CSS modules and SCSS.

## Installation

```bash
npm install @sartecheasysolutions/common-variables
```

## Components

### AgencyBanner

A customizable announcement banner with gradient effects and animated text.

#### Props

| Prop                   | Type     | Default                                          | Description                                 |
| ---------------------- | -------- | ------------------------------------------------ | ------------------------------------------- |
| `announcementTitle`    | string   | 'Agency Markup'                                  | The title text displayed in the banner      |
| `announcementInfo`     | string   | 'Now create the Agency Markup for more revenue!' | The main announcement text                  |
| `buttonText`           | string   | 'Create Agency Markup'                           | Text for the call-to-action button          |
| `announcementImage`    | string   | placeholder URL                                  | Image URL for the banner                    |
| `onClick`              | function | -                                                | Click handler for the button                |
| `primaryColor`         | string   | '#17517b'                                        | Primary color for gradients and backgrounds |
| `secondaryColor`       | string   | '#f26f22'                                        | Secondary color for gradients               |
| `buttonColor`          | string   | '#ff3838'                                        | Button background color                     |
| `buttonHoverColor`     | string   | '#e62e2e'                                        | Button hover color                          |
| `titleTextColor`       | string   | '#fff'                                           | Title text color                            |
| `infoTextColor`        | string   | 'transparent'                                    | Info text color (for gradient effect)       |
| `buttonTextColor`      | string   | '#fff'                                           | Button text color                           |
| `buttonHoverTextColor` | string   | '#fff'                                           | Button text color on hover                  |

#### Usage

```jsx
import { AgencyBanner } from '@sartecheasysolutions/common-variables';

function App() {
  const handleClick = () => {
    console.log('Agency banner clicked!');
  };

  return (
    <AgencyBanner
      announcementTitle="Special Offer"
      announcementInfo="Get 50% off on all services!"
      buttonText="Claim Offer"
      primaryColor="#2c3e50"
      secondaryColor="#e74c3c"
      buttonColor="#3498db"
      buttonHoverColor="#2980b9"
      onClick={handleClick}
    />
  );
}
```

### SearchBanner

A customizable search component with gradient background and responsive design.

#### Props

| Prop               | Type     | Default                     | Description                              |
| ------------------ | -------- | --------------------------- | ---------------------------------------- |
| `title`            | string   | 'Search'                    | The search banner title                  |
| `placeholder`      | string   | 'Enter your search term...' | Placeholder text for the search input    |
| `onSearch`         | function | -                           | Function called when search is submitted |
| `className`        | string   | ''                          | Additional CSS class names               |
| `style`            | object   | {}                          | Additional inline styles                 |
| `primaryColor`     | string   | '#667eea'                   | Primary gradient color                   |
| `secondaryColor`   | string   | '#764ba2'                   | Secondary gradient color                 |
| `buttonColor`      | string   | '#4f46e5'                   | Search button color                      |
| `buttonHoverColor` | string   | '#3730a3'                   | Search button hover color                |
| `titleColor`       | string   | '#fff'                      | Title text color                         |
| `buttonTextColor`  | string   | '#fff'                      | Button text color                        |

#### Usage

```jsx
import { SearchBanner } from '@sartecheasysolutions/common-variables';

function App() {
  const handleSearch = (searchTerm) => {
    console.log('Searching for:', searchTerm);
  };

  return (
    <SearchBanner
      title="Find Your Perfect Match"
      placeholder="Search for products..."
      primaryColor="#ff6b6b"
      secondaryColor="#4ecdc4"
      buttonColor="#45b7d1"
      buttonHoverColor="#3a9bb3"
      onSearch={handleSearch}
    />
  );
}
```

## CSS Custom Properties

Both components use CSS custom properties (CSS variables) for dynamic theming. You can override these properties by passing color props to the components.

### AgencyBanner CSS Variables

- `--primary-color`: Primary color for backgrounds and gradients
- `--secondary-color`: Secondary color for gradients
- `--button-color`: Button background color
- `--button-hover-color`: Button hover color
- `--title-text-color`: Title text color
- `--info-text-color`: Info text color
- `--button-text-color`: Button text color
- `--button-hover-text-color`: Button text color on hover

### SearchBanner CSS Variables

- `--primary-color`: Primary gradient color
- `--secondary-color`: Secondary gradient color
- `--button-color`: Search button color
- `--button-hover-color`: Search button hover color
- `--title-color`: Title text color
- `--button-text-color`: Button text color

## Development

### Build

```bash
npm run build
```

### Development Mode

```bash
npm run dev
```

## License

MIT