Default filter box

import React from 'react';
import { ContentBlock, Button, SvgIcon } from 'seduo-ui';
import DropdownWithIcon from '../examples/DropdownWithIcon';

const Example = () => (
    <ContentBlock>
        <div className="d-flex flex-column flex-md-row justify-content-between">
            <div className="mb-7 mb-md-0">
                <Button color="info">
                    <span className="text-nowrap">
                        <SvgIcon kind="Filter" className="icon icon-white" /> Parametry
                    </span>
                </Button>
            </div>
            <div className="d-flex flex-column flex-md-row align-items-md-center">
                <span className="mr-4 text-nowrap">Řadit od</span>
                <DropdownWithIcon />
            </div>
        </div>
        <hr />
    </ContentBlock>
);

export default Example;

Open filter box

import React from 'react';
import { ContentBlock, Button, SvgIcon, CheckboxList, Row } from 'seduo-ui';
import DropdownWithIcon from '../examples/DropdownWithIcon';
const lectors = [
    {
        title: 'Sobotka',
        count: 1,
    },
    {
        title: 'Ludwig',
        count: 3,
    },
    {
        title: 'Rozbořil',
        count: 2,
    },
];
const durations = [
    {
        title: '0 - 30 min',
        count: 1,
    },
    {
        title: '0,5 - 1 hour',
        count: 3,
    },
    {
        title: '1 - 2 hours',
        count: 2,
    },
    {
        title: '2 and more hours',
        count: 4,
    },
];
const ratings = [
    {
        stars: 5,
        title: '90% and more',
        count: 1,
    },
    {
        stars: 4,
        title: '75% and more',
        count: 3,
    },
    {
        stars: 3,
        title: '60% and more',
        count: 2,
    },
];

const Example = () => (
    <ContentBlock>
        <div className="d-flex flex-column flex-md-row justify-content-between">
            <div className="mb-7 mb-md-0">
                <Button color="info">
                    <span className="text-nowrap">
                        <SvgIcon kind="CheckCircle" className="icon icon-white" /> Hotovo
                    </span>
                </Button>
            </div>
            <div className="d-flex flex-column flex-md-row align-items-md-center">
                <span className="mr-4 text-nowrap">Řadit od</span>
                <DropdownWithIcon />
            </div>
        </div>
        <hr />
        <Row>
            <CheckboxList title="Lector" items={lectors} type="lector" expandLimit={2} />
            <CheckboxList title="Duration" items={durations} type="duration" expandLimit={2} />
            <CheckboxList title="Rating" items={ratings} type="rating" expandLimit={2} />
        </Row>
    </ContentBlock>
);

export default Example;

Filter box - selecting parameters

import React from 'react';
import { ContentBlock, Button, SvgIcon, Badge, CheckboxList, Row } from 'seduo-ui';
import DropdownWithIcon from '../examples/DropdownWithIcon';
const lectors = [
    {
        title: 'Sobotka',
        count: 1,
    },
    {
        title: 'Ludwig',
        count: 3,
    },
    {
        title: 'Rozbořil',
        count: 2,
    },
];
const durations = [
    {
        title: '0 - 30 min',
        count: 1,
    },
    {
        title: '0,5 - 1 hour',
        count: 3,
    },
    {
        title: '1 - 2 hours',
        count: 2,
    },
    {
        title: '2 and more hours',
        count: 4,
    },
];
const ratings = [
    {
        stars: 5,
        title: '90% and more',
        count: 1,
    },
    {
        stars: 4,
        title: '75% and more',
        count: 3,
    },
    {
        stars: 3,
        title: '60% and more',
        count: 2,
    },
];

const Example = () => (
    <ContentBlock>
        <div className="d-flex flex-column flex-xl-row flex-wrap justify-content-between align-content-between">
            <div
                className="d-flex flex-wrap align-items-center align-content-around mb-7 mb-md-0"
                style={{
                    height: '125px',
                }}
            >
                <Button color="info" className="mr-5">
                    <span className="text-nowrap">
                        <SvgIcon kind="CheckCircle" className="icon icon-white" /> Hotovo
                    </span>
                </Button>
                <Badge href="#" color="secondary" className="mr-5">
                    <span className="text-nowrap">
                        Čtení <SvgIcon kind="Close" className="icon icon-white icon--small" />
                    </span>
                </Badge>
                <Badge href="#" color="secondary" className="mr-5">
                    <span className="text-nowrap">
                        Psaní <SvgIcon kind="Close" className="icon icon-white icon--small" />
                    </span>
                </Badge>
                <span className="link text-nowrap">Zrušit</span>
            </div>
            <div className="d-flex flex-column flex-md-row align-items-md-center">
                <span className="mr-4 text-nowrap">Řadit od</span>
                <DropdownWithIcon />
            </div>
        </div>
        <hr />
        <Row>
            <CheckboxList title="Lector" items={lectors} type="lector-selecting" expandLimit={2} />
            <CheckboxList title="Duration" items={durations} type="duration-selecting" expandLimit={2} />
            <CheckboxList title="Rating" items={ratings} type="rating-selecting" expandLimit={2} />
        </Row>
    </ContentBlock>
);

export default Example;

Filter box with selected parameters

import React from 'react';
import { ContentBlock, Button, SvgIcon, Badge } from 'seduo-ui';
import DropdownWithIcon from '../examples/DropdownWithIcon';

const Example = () => (
    <ContentBlock>
        <div className="d-flex flex-column flex-xl-row flex-wrap justify-content-between align-content-between">
            <div
                className="d-flex flex-wrap align-items-center align-content-around mb-7 mb-md-0"
                style={{
                    height: '125px',
                }}
            >
                <Button color="info" className="mr-5">
                    <span className="text-nowrap">
                        <SvgIcon kind="Filter" className="icon icon-white" /> Parametry (2)
                    </span>
                </Button>
                <Badge href="#" color="secondary" className="mr-5">
                    <span className="text-nowrap">
                        Čtení <SvgIcon kind="Close" className="icon icon-white icon--small" />
                    </span>
                </Badge>
                <Badge href="#" color="secondary" className="mr-5">
                    <span className="text-nowrap">
                        Psaní <SvgIcon kind="Close" className="icon icon-white icon--small" />
                    </span>
                </Badge>
                <span className="link text-nowrap">Zrušit filtry</span>
            </div>
            <div className="d-flex flex-column flex-md-row align-items-md-center">
                <span className="mr-4 text-nowrap">Řadit od</span>
                <DropdownWithIcon />
            </div>
        </div>
        <hr />
    </ContentBlock>
);

export default Example;