sonika/sony_intranet_remake2023
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

search component

Browse Source
This commit is contained in:
Sonika 2024-01-01 14:27:37 +05:30
parent ac34e4c302
commit aee30f0c6b
1 changed files with 63 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

68
src/components/search/Search.tsx
View File

@ -1,11 +1,69 @@
import { Paper } from "@mui/material";
import React from "react";
import { Button, Grid, Paper, TextField } from "@mui/material";
import React, { useState } from "react";
export default function Search(){
return (
<Paper square className='projectScreen-background' sx={{ width: '100%', overflow: 'hidden',backgroundColor:'rgb(13 13 13)' }}>
<Paper className='projectScreen-background' sx={{ margin:'1%', width: '100%', overflow: 'hidden' }}>
const [searchText, setSearchText] = useState('');
const handleSearch = () => {
// Implement your search logic here using searchText
console.log('Search:', searchText);
};
const handleClear = () => {
setSearchText('');
};
const handleAdvancedFilter = () => {
// Implement your advanced filter logic here
console.log('Advanced Filter');
};
return (
<Paper square className='projectScreen-background' sx={{ width: '100%', overflow: 'hidden', backgroundColor: 'rgb(13 13 13)' }}>
<Paper className='projectScreen-background' sx={{ margin: '1%', width: '100%', overflow: 'hidden', textAlign: 'center' }}>
<Grid container spacing={2} sx={{ bgcolor: '#181818' }} justifyContent="center">
<Grid item xs={12}>
<TextField
placeholder="Search"
variant="outlined"
value={searchText}
onChange={(e) => setSearchText(e.target.value)}
sx={{
width: '50%',
'& label.Mui-focused': {
color: 'white', // Label color when focused
},
'& .MuiOutlinedInput-root': {
'& fieldset': {
borderColor: 'white', // Border color
},
'&:hover fieldset': {
borderColor: 'white', // Border color on hover
},
'&.Mui-focused fieldset': {
borderColor: 'white', // Border color when focused
},
},
'& input': {
color: 'white', // Input text color
},
marginTop:2
}}
/>
</Grid>
<Grid item xs={12}>
<Button variant="contained" onClick={handleSearch} sx={{ marginRight: '1%', bgcolor: 'red' }}>
Search
</Button>
<Button variant="contained" onClick={handleClear} sx={{ marginRight: '1%', bgcolor: 'red' }}>
Clear
</Button>
<Button variant="contained" onClick={handleAdvancedFilter} sx={{ bgcolor: 'red' }}>
Advanced Filter
</Button>
</Grid>
</Grid>
</Paper>
</Paper>
)