98 lines
1.9 KiB
TypeScript
98 lines
1.9 KiB
TypeScript
import React, { FC } from "react";
|
|
import styled, { css } from "styled-components";
|
|
import CSS from "csstype";
|
|
import { rgba } from "polished";
|
|
import { Icon } from "./Icon";
|
|
|
|
import {
|
|
color,
|
|
padding,
|
|
borderRadius,
|
|
typography,
|
|
opacity,
|
|
outline,
|
|
} from "../shared/styles";
|
|
|
|
export interface InputButtonWithIconProps {
|
|
style?: CSS.Properties;
|
|
id: string;
|
|
variant: "copy" | "download" | "fileinput";
|
|
value: string;
|
|
onClick: () => void;
|
|
}
|
|
|
|
const InputButtonWithIcon: FC<InputButtonWithIconProps> = ({
|
|
style,
|
|
id,
|
|
variant,
|
|
value,
|
|
onClick,
|
|
}) => {
|
|
return (
|
|
<StyledDiv>
|
|
<StyledInput
|
|
style={style}
|
|
id={id}
|
|
variant={variant}
|
|
value={value}
|
|
onClick={onClick}
|
|
type="button"
|
|
/>
|
|
|
|
<Icon iconName={variant} onClick={onClick} />
|
|
</StyledDiv>
|
|
);
|
|
};
|
|
|
|
export { InputButtonWithIcon };
|
|
|
|
const StyledDiv = styled.div`
|
|
position: relative;
|
|
width: 100%;
|
|
height: 6rem;
|
|
`;
|
|
|
|
const StyledInput = styled.input<InputButtonWithIconProps>`
|
|
border: 0;
|
|
border-radius: ${borderRadius.medium};
|
|
cursor: pointer;
|
|
|
|
padding: ${padding.medium};
|
|
padding-right: 6rem;
|
|
width: 100%;
|
|
height: 6rem;
|
|
overflow: hidden;
|
|
|
|
font-size: ${typography.size.medium};
|
|
font-family: ${typography.family.primary};
|
|
font-weight: ${typography.weight.regular};
|
|
text-align: left;
|
|
|
|
&:focus,
|
|
&:focus-visible {
|
|
outline: ${outline.regular};
|
|
}
|
|
|
|
${(props) =>
|
|
props.variant === "copy" &&
|
|
css`
|
|
background-color: ${color.white};
|
|
color: ${color.darkblue};
|
|
`}
|
|
|
|
${(props) =>
|
|
props.variant === "download" &&
|
|
css`
|
|
background-color: ${rgba(color.white, opacity.dark)};
|
|
color: ${color.white};
|
|
`}
|
|
|
|
${(props) =>
|
|
props.variant === "fileinput" &&
|
|
css`
|
|
background-color: ${color.white};
|
|
color: ${color.darkblue};
|
|
border: 2px dashed ${rgba(color.darkblue, opacity.medium)};
|
|
`}
|
|
`;
|