<p align="center">
  <a href="https://scrimmage.co/" target="blank">
    <img src="https://cdn.scrimmage.co/icons/Scrimmage-Logo.webp" width="200" alt="Scrimmage Logo" />
  </a>
</p>

## Overview

@scrimmage/ui-toolkit is a collection of utilities and components that can be used to build alternative UIs
for the Scrimmage app. Scrimmage Widget uses this library to build the UI.

## Installation

```bash
npm install @scrimmage/ui-toolkit
```

## Usage

```typescript
import { getRequirementsProgress } from '@scrimmage/ui-toolkit';

// ...

const {
  progress: levelRequirementProgresses,
  overallProgress,
  completed,
} = getRequirementsProgress(levelUpRequirements, userStats, {
  onMissingIcon: requirement => (
    <div>
      {/* ... */}
    </div>
  ),
  onMissingTitle: 'Missing',
  getProgressLabel: () => (
    <div>
      {/* ... */}
    </div>
  ),
});
```
