mirror of
https://github.com/Sendouc/sendou.ink.git
synced 2026-05-05 04:36:10 -05:00
39 lines
800 B
TypeScript
39 lines
800 B
TypeScript
import { TextInput as MantineTextInput } from "@mantine/core";
|
|
import { createStyles, MantineSize } from "@mantine/styles";
|
|
import { ReactNode } from "react";
|
|
|
|
const useStyles = createStyles(() => ({
|
|
input: {
|
|
backgroundColor: "var(--colors-bg-lighter)",
|
|
color: "var(--colors-text)",
|
|
fontWeight: 500,
|
|
fontSize: "var(--fonts-sm)",
|
|
"::placeholder": {
|
|
color: "var(--colors-text-lighter)",
|
|
},
|
|
},
|
|
}));
|
|
|
|
export function TextInput({
|
|
placeholder,
|
|
icon,
|
|
size,
|
|
}: {
|
|
placeholder: string;
|
|
icon?: ReactNode;
|
|
size?: MantineSize;
|
|
}) {
|
|
const { classes } = useStyles();
|
|
return (
|
|
<MantineTextInput
|
|
placeholder={placeholder}
|
|
rightSection={icon}
|
|
size={size}
|
|
radius="lg"
|
|
classNames={{
|
|
input: classes.input,
|
|
}}
|
|
/>
|
|
);
|
|
}
|