# compatibility-widget

## Usage

### Options
- `items-per-page` (number): Number of items to display per page. Default is 10.
- `src` (string): URL to fetch compatibility data from.
  - One: `https://storage.googleapis.com/autotuner-eu-public/compatibility_one.json` (default)
  - Tool: `https://storage.googleapis.com/autotuner-eu-public/compatibility_tool.json`

### Browser (Global)
```html
<compatibility-widget items-per-page="12" />
<script type="module" src="https://cdn.jsdelivr.net/npm/@autotuner/compatibility@latest/dist/compatibility-widget.js"></script>
<style>
  compatibility-widget {
    --mf-font: "Rajdhani", sans-serif;
    --mf-main-color: #3D3D3D;
    --mf-title-color: #FFFFFF;
    --mf-table-bg: #FFFFFF;
    --mf-pagination-button-color: #3D3D3D;
    --mf-pagination-button-active: #3D3D3D;
    --mf-pagination-button-hover: #3D3D3D;
  }
</style>
```

### React

```bash
npm install @autotuner/compatibility
```

```JSX
import '@autotuner/compatibility';

function App() {
  return (
    <div>
      <compatibility-widget items-per-page="12" />
    </div>
  );
}
export default App;
```

### Svelte

```bash
npm install @autotuner/compatibility
```

```svelte
<script>
  import '@autotuner/compatibility';
</script>

<compatibility-widget items-per-page="12" />

<style>
  compatibility-widget {
    --mf-font: "Rajdhani", sans-serif;
    --mf-main-color: #3D3D3D;
    --mf-title-color: #FFFFFF;
    --mf-table-bg: #FFFFFF;
    --mf-pagination-button-color: #3D3D3D;
    --mf-pagination-button-active: #3D3D3D;
    --mf-pagination-button-hover: #3D3D3D;
  }
</style>
```