filter component and style

src/App.css

@@ -12,4 +12,13 @@
 
 .app-screen-heights{
   min-height: 650px;
+}
+
+.projectScreen-filter-style .css-1ff8729-MuiInputBase-root-MuiFilledInput-root{
+  background-color: #171716 !important;
+  color: aliceblue !important;
+}
+
+.select-field {
+  width : 35%;
 }

src/components/projects/ProjectFilter.js

@@ -1,10 +1,46 @@
+import { Box, Card, CardContent, FormControl, Grid, InputLabel, MenuItem, Paper, Select, TextField } from "@mui/material";
 import React from "react";
 
 export default function ProjectFilter(){
 
     return(
         <>
-        
+         <Card style={{margin: '1%'}}>
+            <CardContent>
+                <FormControl className="select-field" variant="standard" style={{marginTop: '1%'}}>
+                    <InputLabel htmlFor="contract-list" >Select Contract</InputLabel>
+                    <Select
+                        value={''}
+                        // onChange={props.handleContractFilterChange}
+                        inputProps={{
+                        name: 'contracts',
+                        id: 'contract-type',
+                        }}
+                    >
+                        <MenuItem value="All">All</MenuItem>
+                        <MenuItem value="unlinked">Contract Pending</MenuItem>
+                        <MenuItem value="linked">Contract Linked</MenuItem>
+                        <MenuItem value="published">Contract Published</MenuItem>
+                    </Select>
+                </FormControl>
+                <TextField
+                    id="standard-name"
+                    variant="standard"
+                    label="Search By"
+                    value={''}
+                    placeholder="Search By Title, Project Title, Contract No, Asset Title, Track Grid, ISRC"
+                    // onChange={props.handleSearchByChange}
+                    style={{marginLeft: '10%', width: '45%'}}
+                    margin="normal"
+                />
+            </CardContent>
+        </Card>
+       
         </>
     )
-}
+}
+
+/* 
+.select-field {
+  width : 35%;
+} */

src/components/projects/Projects.js

@@ -1,13 +1,14 @@
 import React from "react";
 import ProjectList from "./ProjectsList";
 import { useGetProjectData } from "APIs/getProject";
+import ProjectFilter from "./ProjectFilter";
 
 export default function Projects(){
     const { data: getProjectDataList } = useGetProjectData();
 
     return(
         <>
-        
+        <ProjectFilter/>
         <ProjectList projectData={getProjectDataList}/>
         </>
     )