import * as React from 'react'; import styled from 'styled-components'; export interface SelectItemConfig { label: string; value?: string; onClick?: () => void; } interface SelectProps { value?: string; id: string; items: SelectItemConfig[]; emptyText?: string; onChange?: (ev: React.ChangeEvent) => void; includeEmpty: boolean; } export const Select: React.FunctionComponent = ({ value, id, items, includeEmpty, emptyText, onChange, }) => { return ( {includeEmpty && } {items.map((item, index) => ( ))} ); }; Select.defaultProps = { emptyText: 'Select...', includeEmpty: true, }; const Container = styled.div` background-color: #fff; border-radius: 4px; display: flex; width: 100%; position: relative; `; const StyledSelect = styled.select` appearance: none; border: 0; font-size: 1rem; width: 100%; padding: 20px 20px 20px 20px; `; const Caret = styled.svg` position: absolute; right: 20px; top: calc(50% - 4px); `;