55 lines
1.2 KiB
TypeScript
55 lines
1.2 KiB
TypeScript
"use client"; // Ensure this is at the top of your file
|
|
|
|
import * as React from "react";
|
|
import { styled } from "@mui/material/styles";
|
|
import TextField from "@mui/material/TextField";
|
|
import Visibility from "@mui/icons-material/Visibility";
|
|
import VisibilityOff from "@mui/icons-material/VisibilityOff";
|
|
|
|
// Define your styled component
|
|
const CssTextField = styled(TextField)({
|
|
width: "100%",
|
|
"& label.Mui-focused": {
|
|
color: "var(--primary)",
|
|
},
|
|
"& .MuiInputBase-root": {
|
|
borderRadius: 8,
|
|
},
|
|
"& .MuiOutlinedInput-root": {
|
|
"& fieldset": {
|
|
borderColor: "var(--input-border-default)",
|
|
},
|
|
"&:hover fieldset": {
|
|
borderColor: "var(--input-border-hover)",
|
|
},
|
|
"&.Mui-focused fieldset": {
|
|
borderColor: "var(--primary)",
|
|
},
|
|
},
|
|
});
|
|
|
|
type InputType = {
|
|
label: string;
|
|
type: string;
|
|
endAdornmentBoolean?: React.ReactNode;
|
|
};
|
|
|
|
// Client component
|
|
export default function CustomizedInputsStyled({
|
|
label,
|
|
type,
|
|
endAdornmentBoolean,
|
|
}: InputType) {
|
|
return (
|
|
<>
|
|
<CssTextField
|
|
label={label}
|
|
type={type}
|
|
id="custom-css-outlined-input"
|
|
InputProps={{ endAdornment: endAdornmentBoolean && <VisibilityOff /> }}
|
|
|
|
/>
|
|
</>
|
|
);
|
|
}
|