You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 

84 lines
1.7 KiB

import styled from 'styled-components'
// lib
import * as styles from 'lib/styles/styles'
import palette from 'lib/styles/palette'
// icons
import { DownIcon } from 'lib/svg'
const DropdownValue = ({ value, isDropdown, onClick }: Props) => {
return (
<Container
onClick={onClick}
isDropdown={isDropdown}
title="Select font"
>
<Content>{value}</Content>
<Icon isDropdown={isDropdown}>
<DownIcon />
</Icon>
</Container>
);
}
const Container = styled.button<{isDropdown: boolean}>`
display: flex;
align-items: center;
justify-content: space-between;
position: relative;
width: 100%;
height: 40px;
background-color: ${palette.white};
border: ${({isDropdown}) => isDropdown
? `2px solid ${palette.blue3}`
: `2px solid ${palette.gray1}`
};
border-radius: ${({isDropdown}) => isDropdown
? "20px 20px 0 0"
: "20px"
};
box-sizing: border-box;
padding: 0px 16px;
cursor: pointer;
z-index: 4;
transition: .1s ${styles.transition};
text-align: left;
outline: none;
&:hover, &:focus {
border: 2px solid ${palette.blue3};
& > div {
opacity: 1;
filter: invert(40%) sepia(85%) saturate(1256%) hue-rotate(210deg) brightness(113%) contrast(101%);
}
}
`;
const Content = styled.span`
flex-grow: 1;
margin-right: 16px;
font-size: 14px;
`;
const Icon = styled.div<{isDropdown: boolean}>`
display: flex;
width: 12px;
height: 12px;
opacity: .3;
& > svg {
transform-origin: center;
transform: ${({isDropdown}) => isDropdown
? 'rotate(180deg)'
: 'rotate(0deg)'
};
}
`;
interface Props {
value: string;
isDropdown: boolean;
onClick: (e: any) => void;
}
export default DropdownValue