search component

src/components/search/Search.tsx

@@ -1,11 +1,69 @@
-import { Paper } from "@mui/material";
+import { Button, Grid, Paper, TextField } from "@mui/material";
-import React from "react";
+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>
     )