57 lines
1.7 KiB
TypeScript
57 lines
1.7 KiB
TypeScript
import { FC } from "react";
|
|
import { gray, grayDark } from "@radix-ui/colors";
|
|
import { useTheme } from "next-themes";
|
|
import { styled } from '../stitches.config';
|
|
import dynamic from 'next/dynamic';
|
|
import type { Props } from "react-select";
|
|
const SelectInput = dynamic(() => import("react-select"), { ssr: false });
|
|
|
|
const Select: FC<Props> = props => {
|
|
const { theme } = useTheme();
|
|
const isDark = theme === "dark";
|
|
const colors: any = {
|
|
// primary: pink.pink9,
|
|
primary: isDark ? grayDark.gray4 : gray.gray4,
|
|
secondary: isDark ? grayDark.gray8 : gray.gray8,
|
|
background: isDark ? "rgb(10, 10, 10)" : "rgb(244, 244, 244)",
|
|
searchText: isDark ? grayDark.gray12 : gray.gray12,
|
|
placeholder: isDark ? grayDark.gray11 : gray.gray11,
|
|
};
|
|
colors.outline = colors.background;
|
|
colors.selected = colors.secondary;
|
|
return (
|
|
<SelectInput
|
|
menuPosition="fixed"
|
|
theme={theme => ({
|
|
...theme,
|
|
spacing: {
|
|
...theme.spacing,
|
|
controlHeight: 30
|
|
},
|
|
colors: {
|
|
primary: colors.selected,
|
|
primary25: colors.primary,
|
|
primary50: colors.primary,
|
|
primary75: colors.primary,
|
|
danger: colors.primary,
|
|
dangerLight: colors.primary,
|
|
neutral0: colors.background,
|
|
neutral5: colors.primary,
|
|
neutral10: colors.primary,
|
|
neutral20: colors.outline,
|
|
neutral30: colors.primary,
|
|
neutral40: colors.primary,
|
|
neutral50: colors.placeholder,
|
|
neutral60: colors.primary,
|
|
neutral70: colors.primary,
|
|
neutral80: colors.searchText,
|
|
neutral90: colors.primary,
|
|
},
|
|
})}
|
|
{...props}
|
|
/>
|
|
);
|
|
};
|
|
|
|
export default styled(Select, {});
|