Added warning about unsupported prefix. Added support for Spotify search. Edited README file

client/src/components/SearchBar/SearchBar.module.css

@@ -0,0 +1,17 @@
+.SearchBar {
+  width: 100%;
+  padding: 10px 0;
+  color: var(--color-primary);
+  /* font-size: 20px; */
+  margin-bottom: 20px;
+  background-color: transparent;
+  border: none;
+  border-bottom: 2px solid var(--color-accent);
+  opacity: 0.5;
+  transition: all 0.2s;
+}
+
+.SearchBar:focus {
+  opacity: 1;
+  outline: none;
+}

client/src/components/SearchBar/SearchBar.tsx

@@ -0,0 +1,50 @@
+import { useRef, useEffect, KeyboardEvent } from 'react';
+
+// Redux
+import { connect } from 'react-redux';
+import { createNotification } from '../../store/actions';
+
+// Typescript
+import { NewNotification } from '../../interfaces';
+
+// CSS
+import classes from './SearchBar.module.css';
+
+// Utils
+import { searchParser } from '../../utility';
+
+interface ComponentProps {
+  createNotification: (notification: NewNotification) => void;
+}
+
+const SearchBar = (props: ComponentProps): JSX.Element => {
+  const inputRef = useRef<HTMLInputElement>(document.createElement('input'));
+
+  useEffect(() => {
+    inputRef.current.focus();
+  }, [])
+
+  const searchHandler = (e: KeyboardEvent<HTMLInputElement>) => {
+    if (e.code === 'Enter') {
+      const prefixFound = searchParser(inputRef.current.value);
+
+      if (!prefixFound) {
+        props.createNotification({
+          title: 'Error',
+          message: 'Prefix not found'
+        })
+      }
+    }
+  }
+
+  return (
+    <input
+      ref={inputRef}
+      type='text'
+      className={classes.SearchBar}
+      onKeyDown={(e) => searchHandler(e)}
+    />
+  )
+}
+
+export default connect(null, { createNotification })(SearchBar);