Create projects filter

Author: realstoman

src/components/ProjectsFilter.js

@@ -0,0 +1,38 @@
+const selectOptions = [
+	'Web Application',
+	'Mobile Application',
+	'UI/UX Design',
+	'Branding',
+];
+
+const ProjectsFilter = () => {
+	return (
+		<select
+			className="
+                px-4
+                sm:px-6
+                py-2
+                border
+                dark:border-secondary-dark
+                rounded-lg
+                text-sm
+                sm:text-md
+                dark:font-medium
+                bg-secondary-light
+                dark:bg-ternary-dark
+                text-primary-dark
+                dark:text-ternary-light
+            "
+		>
+			<option value class="text-sm sm:text-md">
+				All Projects
+			</option>
+
+			{selectOptions.map((option) => (
+				<option className="text-normal sm:text-md">{option}</option>
+			))}
+		</select>
+	);
+};
+
+export default ProjectsFilter;

src/components/ProjectsGrid.js

@@ -1,4 +1,5 @@
 import { FiSearch } from 'react-icons/fi';
+import ProjectsFilter from './ProjectsFilter';
 import ProjectSingle from './ProjectSingle';
 
 const ProjectsGrid = () => {
@@ -80,7 +81,8 @@ const ProjectsGrid = () => {
 						/>
 					</div>
 					{/* <ProjectsFilter @change="selectedProject = $event" /> */}
-					<p>Filter projects</p>
+					<ProjectsFilter />
+					{/* <p>Filter projects</p> */}
 				</div>
 			</div>
 			{/* Filter and search projects end */}