Competition Results

Visualize outcomes in a structured format

Use the CompetitionResults component to visualize outcomes of games, sports, or contests between two people in a structured format. They can present information in a clear and organized way. Connecting the component with an API can also turn the element into a real-time update feed.

Preview

226Jane

312Jack

Lost with 42.01% (total votes: 226)Won with 57.99% (total votes: 312)

---
const competitorA = {
    name: 'Jane',
    score: 226,
    subText: 'Lost with {1} (total votes: {0})',
    img: {
        src: '/img/jane.png',
        alt: 'Jane',
        size: 50
    }
}

const competitorB = {
    name: 'Jack',
    score: 312,
    subText: 'Won with {1} (total votes: {0})',
    img: {
        src: '/img/jack.png',
        alt: 'Jack',
        size: 50
    }
}
---

<CompetitionResults competitors={[competitorA, competitorB]} />

The component expects a competitors prop that should have two competitor objects with the following properties:

• name: Sets the name of the competitor.
• score: Sets a score for the competitor.
• subText: Sets additional text under the competitor. You can use the {0} and {1} placeholders to display the score or percentage respectively.
• img: Sets an avatar for the competitor. The img property expects an object in the form of AvatarProps.

Showing Percentages

You can show percentages using the showPercentage property. This is displayed along with the score in case you want to display both. If you want to hide the score and display the percentage only, you also need to set the showScore property to false:

Results with percentages

42.01%Jane

57.99%Jack

Lost with 42.01% (total votes: 226)Won with 57.99% (total votes: 312)

<CompetitionResults
    competitors={[competitorA, competitorB]}
    showScore={false}
    showPercentage={true}
/>

Percentages are automatically formatted and clipped up to two decimal places. You can also show names only by disabling showScore.

Custom Colors

In the default setting, the first competitor will use the --w-color-info variable as the color, and --w-color-alert will be used by the second. To change colors, you can specify a color property on your competitor object:

Custom colors

226Jane

312Jack

Lost with 42.01% (total votes: 226)Won with 57.99% (total votes: 312)

---
const competitorA = {
    name: 'Jane',
    color: 'var(--w-color-success)',
    ...
}

const competitorB = {
    name: 'Jack',
    color: 'var(--w-color-warning)'
    ...
}
---

<CompetitionResults competitors={[competitorA, competitorB]} />

You can use CSS variables or any other valid color value, such as hex codes. This sets the colors for the competitors on the component level. If you want to set custom colors globally, prefer overriding the following CSS variables instead:

html body {
    --w-competition-results-color-a: var(--w-color-info);
    --w-competition-results-color-b: var(--w-color-alert);
}

Disabling Highlights

The winner will automatically gets highlighted using a border and a check mark. You can disable both of them using the showWinnerBorder and showWinnerCheckMark props:

No highlight

226Jane

312Jack

Lost with 42.01% (total votes: 226)Won with 57.99% (total votes: 312)

<CompetitionResults
    competitors={[competitorA, competitorB]}
    showWinnerBorder={false}
    showWinnerCheckMark={false}
/>

API

type CompetitionResultsProps = {
    competitors: {
        name: string
        score: number
        color?: string
        subText?: string
        img: {
            src: string
        } & Omit<AvatarProps, 'img'>
    }[]
    showScore?: boolean
    showPercentage?: boolean
    showWinnerCheckMark?: boolean
    showWinnerBorder?: boolean
    className?: string
}