From 7698c3f01aafec919de73f27b26cee8de9d7d3c4 Mon Sep 17 00:00:00 2001 From: ElhamFadel Date: Mon, 1 Nov 2021 20:55:55 +0300 Subject: [PATCH] create & design search component #45 --- client/.eslintrc.json | 3 +- client/.gitignore | 2 +- client/src/App.js | 6 ++- client/src/assets/Solid.svg | 4 ++ client/src/assets/index.js | 3 ++ client/src/assets/marker.svg | 3 ++ client/src/assets/money.svg | 8 +++ client/src/components/Search/index.js | 67 ++++++++++++++++++++++++++ client/src/components/Search/style.css | 58 ++++++++++++++++++++++ client/src/components/index.js | 1 + client/src/index.js | 3 +- 11 files changed, 153 insertions(+), 5 deletions(-) create mode 100644 client/src/assets/Solid.svg create mode 100644 client/src/assets/index.js create mode 100644 client/src/assets/marker.svg create mode 100644 client/src/assets/money.svg create mode 100644 client/src/components/Search/index.js create mode 100644 client/src/components/Search/style.css diff --git a/client/.eslintrc.json b/client/.eslintrc.json index 19d7e67..db5c5e8 100644 --- a/client/.eslintrc.json +++ b/client/.eslintrc.json @@ -21,6 +21,7 @@ "react" ], "rules": { - "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }] + "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }], + "import/prefer-default-export": "off" } } diff --git a/client/.gitignore b/client/.gitignore index 9779ad4..d21fdc8 100644 --- a/client/.gitignore +++ b/client/.gitignore @@ -17,7 +17,7 @@ package-lock.json .env.development.local .env.test.local .env.production.local - +.env npm-debug.log* yarn-debug.log* yarn-error.log* diff --git a/client/src/App.js b/client/src/App.js index 2a4bc88..6c1dc7c 100644 --- a/client/src/App.js +++ b/client/src/App.js @@ -1,6 +1,10 @@ +import { Search } from './components'; + function App() { return ( -
+
+ +
); } diff --git a/client/src/assets/Solid.svg b/client/src/assets/Solid.svg new file mode 100644 index 0000000..7626394 --- /dev/null +++ b/client/src/assets/Solid.svg @@ -0,0 +1,4 @@ + + + + diff --git a/client/src/assets/index.js b/client/src/assets/index.js new file mode 100644 index 0000000..96bb1bb --- /dev/null +++ b/client/src/assets/index.js @@ -0,0 +1,3 @@ +export { default as marker } from './marker.svg'; +export { default as money } from './money.svg'; +export { default as room } from './Solid.svg'; diff --git a/client/src/assets/marker.svg b/client/src/assets/marker.svg new file mode 100644 index 0000000..943ad7b --- /dev/null +++ b/client/src/assets/marker.svg @@ -0,0 +1,3 @@ + + + diff --git a/client/src/assets/money.svg b/client/src/assets/money.svg new file mode 100644 index 0000000..d6bcc39 --- /dev/null +++ b/client/src/assets/money.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/client/src/components/Search/index.js b/client/src/components/Search/index.js new file mode 100644 index 0000000..507787e --- /dev/null +++ b/client/src/components/Search/index.js @@ -0,0 +1,67 @@ +import { Container, Button, TextField } from '@mui/material'; +import { marker, money, room } from '../../assets'; +import './style.css'; + +function Search() { + return ( + +
+ + +
+
+ + marker + + ), + }} + hiddenLabel + id="filled-hidden-label-normal" + placeholder="Enter your location" + variant="filled" + /> + + marker + + ), + }} + hiddenLabel + id="filled-hidden-label-normal" + placeholder=" max price" + variant="filled" + /> + + marker + + ), + }} + hiddenLabel + id="filled-hidden-label-normal" + placeholder="room number" + variant="filled" + /> + +
+
+ +
+ + ); +} + +export default Search; diff --git a/client/src/components/Search/style.css b/client/src/components/Search/style.css new file mode 100644 index 0000000..9f3c749 --- /dev/null +++ b/client/src/components/Search/style.css @@ -0,0 +1,58 @@ +.search-container .css-sghohy-MuiButtonBase-root-MuiButton-root { + background-color: #fff; + text-transform: capitalize; + border-radius: 4px; + color:#2E72DB; + box-shadow: none; + border-radius: 4px 0px 0px 0px; + padding: 0.5rem 2rem; +} +.search-container .css-sghohy-MuiButtonBase-root-MuiButton-root:hover { + background-color: #123B65; + color:#fff; + box-shadow: none; +} +.search-container .active-search{ + background-color: #123B65; + color:#fff; +} +.search-container .active-search:hover{ + background-color: #fff; + color:#2E72DB; +} +.search-container{ + width:75% +} +.search-bar{ + background: #fff; + display: flex; + box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); + padding: 0 0.5rem; +} +.search-bar-container{ + display: flex; + padding: 0.35rem 0; + width: 100%; + justify-content: space-between; +} +.search-bar-container img{ + width: 1.5rem; + height: 1.5rem; + margin-right: 0.5rem; +} +.search-container input#filled-hidden-label-normal { + width: 10rem; + font-size: .8em; + color: #1e74da; +} +.btn-search.css-jh47zj-MuiButtonBase-root-MuiButton-root{ + text-transform: capitalize; + width: 10rem; + font-weight: 700; +} +.search-container .css-sgvi9r-MuiInputBase-root-MuiFilledInput-root:before { + border:none +} +.search-container .css-sgvi9r-MuiInputBase-root-MuiFilledInput-root{ + border-radius: 4px; +} diff --git a/client/src/components/index.js b/client/src/components/index.js index e69de29..1d53a98 100644 --- a/client/src/components/index.js +++ b/client/src/components/index.js @@ -0,0 +1 @@ +export { default as Search } from './Search'; diff --git a/client/src/index.js b/client/src/index.js index 62adcf3..f452ad2 100644 --- a/client/src/index.js +++ b/client/src/index.js @@ -7,6 +7,5 @@ ReactDOM.render( , - document.getElementById('root') + document.getElementById('root'), ); -