File size: 1,830 Bytes
f909d7c |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 |
import React from "react";
import styled from "styled-components";
const StyledInputWrapper = styled.div`
background: ${({ theme }) => theme.BACKGROUND_TERTIARY};
width: 100%;
border-radius: 4px;
`;
const StyledForm = styled.div`
display: flex;
flex: 1;
`;
const StyledInput = styled.input`
background: ${({ theme }) => theme.BACKGROUND_TERTIARY};
color: ${({ theme }) => theme.INTERACTIVE_NORMAL};
outline: none;
border: none;
border-radius: 4px;
line-height: 32px;
padding: 10px;
width: 100%;
height: 40px;
`;
const StyledButton = styled.button`
display: flex;
align-items: center;
background: none;
color: ${({ theme }) => theme.INTERACTIVE_NORMAL};
padding: 0 10px;
min-height: unset;
text-transform: uppercase;
&:hover {
box-shadow: none;
}
&.active {
background: ${({ theme }) => theme.PRIMARY};
color: white;
outline: 3px solid ${({ theme }) => theme.BACKGROUND_TERTIARY};
border-radius: 10px;
}
`;
export interface InputProps {
value: string | number | string[];
extensions: string[];
activeExtension: number;
onChange?: React.ChangeEventHandler<HTMLInputElement>;
setExtension: (value: number) => void;
}
export const FileInput: React.FC<InputProps> = ({
setExtension,
activeExtension,
onChange,
extensions,
value,
}) => {
return (
<StyledInputWrapper>
<StyledForm>
<StyledInput type="text" onChange={onChange} value={value} placeholder="File Name" />
{extensions.map((ext, key) => (
<StyledButton
className={`${activeExtension === key && "active"}`}
key={key}
aria-label="search"
onClick={() => setExtension(key)}
>
{ext}
</StyledButton>
))}
</StyledForm>
</StyledInputWrapper>
);
};
|