Ratings

import React from 'react';
import { SvgIcon } from 'seduo-ui';

const Example = () => (
    <div className="rating">
        <div className="rating__stars">
            <span
                className="rating__stars-filled"
                style={{
                    width: '75%',
                }}
            >
                <SvgIcon kind="Star" className="rating__star" />
                <SvgIcon kind="Star" className="rating__star" />
                <SvgIcon kind="Star" className="rating__star" />
                <SvgIcon kind="Star" className="rating__star" />
                <SvgIcon kind="Star" className="rating__star" />
            </span>
            <span className="rating__stars-empty">
                <SvgIcon kind="StarOutline" className="rating__star" />
                <SvgIcon kind="StarOutline" className="rating__star" />
                <SvgIcon kind="StarOutline" className="rating__star" />
                <SvgIcon kind="StarOutline" className="rating__star" />
                <SvgIcon kind="StarOutline" className="rating__star" />
            </span>
        </div>
    </div>
);

export default Example;

Ratings with description

import React from 'react';
import { SvgIcon } from 'seduo-ui';

const Example = () => (
    <div className="rating">
        <div className="rating__stars">
            <span
                className="rating__stars-filled"
                style={{
                    width: '75%',
                }}
            >
                <SvgIcon kind="Star" className="rating__star" />
                <SvgIcon kind="Star" className="rating__star" />
                <SvgIcon kind="Star" className="rating__star" />
                <SvgIcon kind="Star" className="rating__star" />
                <SvgIcon kind="Star" className="rating__star" />
            </span>
            <span className="rating__stars-empty">
                <SvgIcon kind="StarOutline" className="rating__star" />
                <SvgIcon kind="StarOutline" className="rating__star" />
                <SvgIcon kind="StarOutline" className="rating__star" />
                <SvgIcon kind="StarOutline" className="rating__star" />
                <SvgIcon kind="StarOutline" className="rating__star" />
            </span>
        </div>
        <a href="#" className="rating__description">
            hodnocení 75%
        </a>
    </div>
);

export default Example;