Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 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 82 83 84 85 86 87 88 89 90 91 92 93 | 21x 151x 151x 21x 21x 21x | import { palette } from "@palette";
import Box from "@mui/material/Box";
import Stack from "@mui/material/Stack";
import { Text } from "@common/Text";
import { styled, SxProps } from "@mui/material";
import { UploadIcon } from "@assets/rebrandIcons";
import { useCustomTheme } from "@theme/hooks/useCustomTheme";
import React from "react";
import { DropzoneInputProps } from "react-dropzone";
type InputNewProps = DropzoneInputProps & {
customText?: string;
labelSx?: SxProps;
};
const InputNew = React.forwardRef<HTMLInputElement, InputNewProps>(
({ customText, ...props }, inputRef) => {
const { isDesktopView } = useCustomTheme();
return (
<Stack
height="100%"
width="100%"
alignItems="center"
justifyContent="center"
sx={{
height: "100%",
borderRadius: 12,
}}
>
<Stack
height="100%"
width="100%"
component="label"
alignItems="center"
justifyContent="center"
sx={{
cursor: "pointer",
...props.labelSx
}}
>
<StyledContainer>
<UploadIcon />
{isDesktopView ? (
<Stack
direction="row"
spacing={0.5}
mt={1}
justifyContent="center"
>
<StyledText color={palette.neutral[80]}>
Drag and drop your files or
</StyledText>
<StyledText color="accent.3">click to browse</StyledText>
</Stack>
) : (
<Text color="accent.3" textAlign="center">
Tap to browse
</Text>
)}
<Text
textAlign="center"
color="neutral.70"
variant="caption"
mt={1}
>
{customText}
</Text>
</StyledContainer>
<input
data-testid="file-upload-input"
id="upload"
{...props}
ref={inputRef}
/>
</Stack>
</Stack>
);
},
);
InputNew.displayName = "InputNew";
const StyledContainer = styled(Box)({
textAlign: "center",
});
const StyledText = styled(Text)({
height: "100%",
});
export default React.memo(InputNew);
|