<commit_before>import React from 'react';
import { titleCase } from '../../utils';
import classnames from 'classnames';
import { brandColors, colors, onDarkOutline, onDarkSolid } from '../Content';
import { FaStar } from 'react-icons/fa';
import { Link } from 'react-router-dom';
import { Breadcrumbs, BreadcrumbItem } from '../../components/Breadcrumbs';

const BadgesPage = () => (
    <section className="mb-5">
        <Breadcrumbs>
            <BreadcrumbItem as={Link} to="/components">
                Components
            </BreadcrumbItem>
            <BreadcrumbItem current>Badges</BreadcrumbItem>
        </Breadcrumbs>
        <h2>Badges</h2>
        <hr />
        <p>
            <strong>Required assets:</strong> <code>scss/components/_badges.scss</code>,{' '}
            <code>scss/_settings.scss</code>, and <code>scss/_functions.scss</code>
        </p>
        <div className="mb-4">
            {brandColors.map(([color]) => (
                <div
                    className={classnames('d-inline-block mr-1 mb-1 rounded', {
                        'bg-dark p-2': onDarkSolid.includes(color)
                    })}
                >
                    <div key={`badge-${color}`} className={classnames('badge', ` badge-${color}`)}>
                        {titleCase(color)}
                    </div>
                </div>
            ))}

            <div className="badge badge-primary mr-1">
                Primary, with <a href="#demo">anchor link</a>
            </div>
            <div className="badge badge-primary">
                With Icon <FaStar />
            </div>
        </div>
        <div className="mb-4">
            {colors.map(([color]) => (
                <div
                    className={classnames('d-inline-block mr-1 mb-1 rounded', {
                        'bg-dark p-2': onDarkSolid.includes(color)
                    })}
                >
                    <div key={`badge-${color}`} className={classnames('badge', ` badge-${color}`)}>
                        {titleCase(color)}
                    </div>
                </div>
            ))}
        </div>

        <h3>Outline Badges</h3>
        <p>
            <code>light</code> and <code>warning</code> omitted due to poor visibility.
        </p>
        <div className="mb-4">
            {brandColors.map(([color]) => (
                <div
                    className={classnames('d-inline-block mr-1 mb-1 rounded', {
                        'bg-dark p-2': onDarkOutline.includes(color)
                    })}
                >
                    <div key={`badge-outline-${color}`} className={classnames('badge', ` badge-outline-${color}`)}>
                        {titleCase(color)}
                    </div>
                </div>
            ))}
        </div>
        <div>
            {colors.map(([color]) => (
                <div
                    className={classnames('d-inline-block mr-1 mb-1 rounded', {
                        'bg-dark p-2': onDarkOutline.includes(color)
                    })}
                >
                    <div key={`badge-outline-${color}`} className={classnames('badge', ` badge-outline-${color}`)}>
                        {titleCase(color)}
                    </div>
                </div>
            ))}
        </div>
    </section>
);

export default BadgesPage;
<commit_msg>Add more missing key props<commit_after>import React from 'react';
import { titleCase } from '../../utils';
import classnames from 'classnames';
import { brandColors, colors, onDarkOutline, onDarkSolid } from '../Content';
import { FaStar } from 'react-icons/fa';
import { Link } from 'react-router-dom';
import { Breadcrumbs, BreadcrumbItem } from '../../components/Breadcrumbs';

const BadgesPage = () => (
    <section className="mb-5">
        <Breadcrumbs>
            <BreadcrumbItem as={Link} to="/components">
                Components
            </BreadcrumbItem>
            <BreadcrumbItem current>Badges</BreadcrumbItem>
        </Breadcrumbs>
        <h2>Badges</h2>
        <hr />
        <p>
            <strong>Required assets:</strong> <code>scss/components/_badges.scss</code>,{' '}
            <code>scss/_settings.scss</code>, and <code>scss/_functions.scss</code>
        </p>
        <div className="mb-4">
            {brandColors.map(([color]) => (
                <div
                    key={`badge-${color}`}
                    className={classnames('d-inline-block mr-1 mb-1 rounded', {
                        'bg-dark p-2': onDarkSolid.includes(color)
                    })}
                >
                    <div key={`badge-${color}`} className={classnames('badge', ` badge-${color}`)}>
                        {titleCase(color)}
                    </div>
                </div>
            ))}

            <div className="badge badge-primary mr-1">
                Primary, with <a href="#demo">anchor link</a>
            </div>
            <div className="badge badge-primary">
                With Icon <FaStar />
            </div>
        </div>
        <div className="mb-4">
            {colors.map(([color]) => (
                <div
                    key={`badge-${color}`}
                    className={classnames('d-inline-block mr-1 mb-1 rounded', {
                        'bg-dark p-2': onDarkSolid.includes(color)
                    })}
                >
                    <div key={`badge-${color}`} className={classnames('badge', ` badge-${color}`)}>
                        {titleCase(color)}
                    </div>
                </div>
            ))}
        </div>

        <h3>Outline Badges</h3>
        <p>
            <code>light</code> and <code>warning</code> omitted due to poor visibility.
        </p>
        <div className="mb-4">
            {brandColors.map(([color]) => (
                <div
                    key={`badge-outline-${color}`}
                    className={classnames('d-inline-block mr-1 mb-1 rounded', {
                        'bg-dark p-2': onDarkOutline.includes(color)
                    })}
                >
                    <div key={`badge-outline-${color}`} className={classnames('badge', ` badge-outline-${color}`)}>
                        {titleCase(color)}
                    </div>
                </div>
            ))}
        </div>
        <div>
            {colors.map(([color]) => (
                <div
                    key={`badge-outline-${color}`}
                    className={classnames('d-inline-block mr-1 mb-1 rounded', {
                        'bg-dark p-2': onDarkOutline.includes(color)
                    })}
                >
                    <div key={`badge-outline-${color}`} className={classnames('badge', ` badge-outline-${color}`)}>
                        {titleCase(color)}
                    </div>
                </div>
            ))}
        </div>
    </section>
);

export default BadgesPage;

{'fraction_non_alphanumeric': 0.15602018745493873, 'fraction_numerical': 0.006056236481614997, 'mean_word_length': 1.3377148634984832, 'pattern_counts': {'":': 0, '<': 123, '<?xml version=': 0, '>': 133, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '4023316', 'n_tokens_mistral': 2025, 'n_tokens_neox': 1940, 'n_words': 334}