kitten.sh
1import React from 'react';
2import PropTypes from 'prop-types';
3import styled from 'styled-components';
4
5const StyledInput = styled.input`
6 background-color: rgba(255, 255, 255, 0.8);
7 border: none;
8 border-radius: 0.5rem;
9 color: ${p => p.theme.colors.text};
10 font-family: ${p => p.theme.fonts.body};
11 font-size: 1.6rem;
12 line-height: 2.3rem;
13 letter-spacing: -0.6px;
14 margin: ${p =>
15 `${p.theme.spacing.sm} 0 ${p.theme.spacing.sm} calc(${p.theme.spacing.xs} * -1.5)`};
16 padding: ${p =>
17 `${p.theme.spacing.xs} calc(${p.theme.spacing.xs} * 1.5) ${p.theme.spacing.xs}`};
18 width: calc(100% + 1.8rem);
19 background-color: ${p => p.theme.colors.passiveBg};
20
21 @media ${p => p.theme.media.sm} {
22 background-color: ${p => p.theme.colors.bg};
23 }
24`;
25
26const SidebarSearchInput = ({ value, onHandleInputChange }) => (
27 <StyledInput
28 onChange={onHandleInputChange}
29 placeholder="Filter..."
30 type="search"
31 value={value}
32 />
33);
34
35SidebarSearchInput.propTypes = {
36 value: PropTypes.string,
37 onHandleInputChange: PropTypes.func,
38};
39
40export default SidebarSearchInput;