import * as React from 'react';
import {
    Column,
    Dropdown,
    DropdownItem,
    Icon,
} from '../web'

const doNothing = (e: React.MouseEvent<any>) => e.preventDefault();

export class DropdownExample extends React.Component<any, any> {
    public render() {
        return (
            <Column fullWidth style={{
                backgroundColor: '#1d93d2',
                color: 'white',
                boxSizing: 'border-box',
                padding: '20px',
            }}>

                <h2>Demo dropdowns</h2>

                <Dropdown name="exampleDropdown">
                    <DropdownItem
                        id="randomDropdownId"
                        active={true}
                        onClick={doNothing}>
                        active
                    </DropdownItem>
                    <DropdownItem
                        active={false}
                        onClick={doNothing}>
                        not active
                    </DropdownItem>
                </Dropdown>

            </Column>
        )
    }
}