diff --git a/src/assets/search.svg b/src/assets/search.svg
new file mode 100644
index 0000000..7d7452e
--- /dev/null
+++ b/src/assets/search.svg
@@ -0,0 +1,9 @@
+
\ No newline at end of file
diff --git a/src/components/SearchBar.tsx b/src/components/SearchBar.tsx
index da32239..abc69fe 100644
--- a/src/components/SearchBar.tsx
+++ b/src/components/SearchBar.tsx
@@ -1,13 +1,23 @@
import React, { useState } from 'react';
import styled from 'styled-components';
import { useHistory } from 'react-router-dom';
+import SearchIcon from '../assets/search.svg';
-const Input = styled.input`
+const Wrapper = styled.div`
+ width: 100%;
+ display: grid;
+ grid-template-columns: 1fr auto;
+ justify-content: center;
+ align-items: center;
border: 1px solid rgba(0, 0, 0, 0.15);
border-radius: 5px;
- padding: 0.25rem 0.5rem;
justify-self: flex-end;
- width: 100%;
+ padding: 0.2rem 0.5rem;
+`;
+
+const Input = styled.input`
+ border: none;
+ border-radius: 5px;
&::placeholder {
color: rgba(0, 0, 0, 0.5);
@@ -19,18 +29,25 @@ const SearchBar: React.FC = () => {
const history = useHistory();
const search = (event: React.KeyboardEvent) => {
- if (event.key === 'Enter') {
+ if (event.key === 'Enter' && query !== '') {
history.push(`/search/${query}`);
setQuery('');
}
}
return (
- setQuery(event.target.value)}
- />
+
+ setQuery(event.target.value)}
+ />
+
+
);
}