97 lines
3.4 KiB
TypeScript
97 lines
3.4 KiB
TypeScript
import {useState} from "react";
|
|
import '../assets/styles/home.css';
|
|
import {
|
|
createTheme,
|
|
Divider,
|
|
outlinedInputClasses,
|
|
TextField,
|
|
type Theme,
|
|
ThemeProvider,
|
|
useTheme
|
|
} from "@mui/material";
|
|
|
|
export default function Home() {
|
|
const [searchText, setSearchText] = useState('');
|
|
|
|
const customTheme = (outerTheme: Theme) =>
|
|
createTheme({
|
|
palette: {
|
|
mode: outerTheme.palette.mode,
|
|
},
|
|
components: {
|
|
MuiTextField: {
|
|
styleOverrides: {
|
|
root: {
|
|
'--TextField-brandBorderColor': '#E0E3E7',
|
|
'--TextField-brandBorderHoverColor': '#B2BAC2',
|
|
'--TextField-brandBorderFocusedColor': '#6F7E8C',
|
|
'& label': {
|
|
color: 'var(--TextField-brandBorderColor)',
|
|
},
|
|
'& label.Mui-focused': {
|
|
color: 'var(--TextField-brandBorderColor)',
|
|
},
|
|
'& input': {
|
|
color: 'var(--TextField-brandBorderColor)',
|
|
borderColor: 'var(--TextField-brandBorderColor)',
|
|
},
|
|
},
|
|
},
|
|
},
|
|
MuiOutlinedInput: {
|
|
styleOverrides: {
|
|
notchedOutline: {
|
|
borderColor: 'var(--TextField-brandBorderColor)',
|
|
},
|
|
root: {
|
|
[`&:hover .${outlinedInputClasses.notchedOutline}`]: {
|
|
borderColor: 'var(--TextField-brandBorderHoverColor)',
|
|
},
|
|
[`&.Mui-focused .${outlinedInputClasses.notchedOutline}`]: {
|
|
borderColor: 'var(--TextField-brandBorderFocusedColor)',
|
|
},
|
|
},
|
|
},
|
|
},
|
|
MuiDivider: {
|
|
styleOverrides: {
|
|
root: {
|
|
'--TextField-brandBorderColor': '#E0E3E7',
|
|
borderColor: 'var(--TextField-brandBorderColor)',
|
|
borderWidth: 1,
|
|
width: '95%',
|
|
}
|
|
}
|
|
}
|
|
}
|
|
});
|
|
const outerTheme = useTheme();
|
|
|
|
function handleSearch(text: string) {
|
|
setSearchText(text);
|
|
}
|
|
|
|
return (
|
|
<ThemeProvider theme={customTheme(outerTheme)}>
|
|
<div className="bg-dark">
|
|
<div className="search-container">
|
|
<TextField
|
|
id="search-field"
|
|
label="Search"
|
|
variant="outlined"
|
|
value={searchText}
|
|
onChange={(e) => handleSearch(e.target.value)}
|
|
fullWidth
|
|
/>
|
|
</div>
|
|
<div style={{justifyItems: 'center'}}>
|
|
<Divider sx={{marginTop: '10px', marginBottom: '10px'}}/>
|
|
</div>
|
|
<div className="list-container">
|
|
<p>{searchText} //</p>
|
|
</div>
|
|
</div>
|
|
</ThemeProvider>
|
|
);
|
|
}
|