1 files changed, 22 insertions, 6 deletions
diff --git a/apps/Radio/components/Search.js b/apps/Radio/components/Search.js
index 363a37c..2bb3371 100644
--- a/apps/Radio/components/Search.js
+++ b/apps/Radio/components/Search.js
@@ -1,8 +1,10 @@
 import { useState } from 'react'
-import styles from '../styles/Radio.module.scss'
+import useSettings from 'hooks/useSettings'
 import fetchJson from 'helpers/fetchJson'
+import styles from '../styles/Radio.module.scss'
 
 const searchQuery = async (query, setResults) => {
+  setResults('loading')
   const results = await fetchJson('/api/radio/stations', {
     method: 'POST',
     body: JSON.stringify({ query })
@@ -14,17 +16,31 @@ const searchQuery = async (query, setResults) => {
 const Search = ({ setResults }) => {
   const [query, setQuery] = useState('')
   const changeQuery = e => setQuery(e.target.value)
+  const { t } = useSettings()
+
+  const onSubmit = e => {
+    e.preventDefault()
+    searchQuery(query, setResults)
+  }
 
   return (
-    <div className={styles.search}>
-      <input type="text" onChange={changeQuery} value={query} />
+    <form
+      className={styles.search}
+      onSubmit={onSubmit}
+    >
+      <input
+        type="text"
+        onChange={changeQuery}
+        placeholder={t('radio_search_placeholder')}
+        value={query}
+      />
       <span
         className="window__button"
-        onClick={() => searchQuery(query, setResults)}
+        onClick={onSubmit}
       >
-        Search
+        {t('radio_search')}
       </span>
-    </div>
+    </form>
   )
 }