fix search bar

Author: votrungquan1999

packages/frontend/src/components/SearchBar/SearchBar.js

@@ -1,9 +1,15 @@
-import React from 'react'
-import styles from './SearchBar.module.css'
+import React from 'react';
+import styles from './SearchBar.module.css';
 
-const SearchBar = () => {
-   return (
-        <input type="search" placeholder="Search..." className={styles.SearchBar}/>
-)}
+const SearchBar = ({ onChange }) => {
+	return (
+		<input
+			type='search'
+			placeholder='Search...'
+			className={styles.SearchBar}
+			onChange={onChange}
+		/>
+	);
+};
 
-export default SearchBar
+export default SearchBar;

packages/frontend/src/components/SearchBar/SearchBar.module.css

@@ -1,20 +1,19 @@
-
 .SearchBar {
-    border: 1px solid white;
-    display: block;
-    float: right;
-    width: 285px;
-    height: 30px;
-    padding-left: 15px;
-    padding-right: 15px;
-    border-radius: 15px;
-    background-image: url("search_icon.png");
-    background-repeat: no-repeat;
-    background-position: 97% 50%;
+	border: 1px solid white;
+	display: block;
+	float: right;
+	width: 80%;
+	height: 50px;
+	padding-left: 15px;
+	padding-right: 15px;
+	border-radius: 15px;
+	background-image: url('search_icon.png');
+	background-repeat: no-repeat;
+	background-position: 97% 50%;
 
-    background-size: 16px;
+	background-size: 16px;
 }
 
-.SearchBar:focus{
-    outline: none;
-}
+.SearchBar:focus {
+	outline: none;
+}