mirror of
https://github.com/checktheroads/hyperglass
synced 2024-05-11 05:55:08 +00:00
34 lines
1.1 KiB
JavaScript
34 lines
1.1 KiB
JavaScript
import React from "react";
|
|
import styled from "@emotion/styled";
|
|
import { Input, useColorMode, useTheme } from "@chakra-ui/core";
|
|
|
|
const StyledInput = styled(Input)`
|
|
&::placeholder {
|
|
color: ${props => props.placeholderColor};
|
|
}
|
|
`;
|
|
|
|
export default ({ placeholder, register }) => {
|
|
const theme = useTheme();
|
|
const { colorMode } = useColorMode();
|
|
const bg = colorMode === "dark" ? theme.colors.whiteAlpha[100] : theme.colors.white;
|
|
const color = colorMode === "dark" ? theme.colors.whiteAlpha[800] : theme.colors.gray[400];
|
|
const border = colorMode === "dark" ? theme.colors.whiteAlpha[50] : theme.colors.gray[100];
|
|
const borderRadius = theme.space[1];
|
|
const placeholderColor =
|
|
colorMode === "dark" ? theme.colors.whiteAlpha[400] : theme.colors.gray[400];
|
|
return (
|
|
<StyledInput
|
|
name="query_target"
|
|
ref={register}
|
|
placeholder={placeholder}
|
|
placeholderColor={placeholderColor}
|
|
size="lg"
|
|
bg={bg}
|
|
color={color}
|
|
borderColor={border}
|
|
borderRadius={borderRadius}
|
|
/>
|
|
);
|
|
};
|