chore: add Search page

3 files changed, 14 insertions, 13 deletions

diff --git a/src/components/organisms/forms/search-form.stories.tsx b/src/components/organisms/forms/search-form.stories.tsx
index 7f4c7c0..6ea6122 100644
--- a/src/components/organisms/forms/search-form.stories.tsx
+++ b/src/components/organisms/forms/search-form.stories.tsx
@@ -1,5 +1,4 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
-import { IntlProvider } from 'react-intl';
 import SearchForm from './search-form';
 
 /**
@@ -10,6 +9,7 @@ export default {
   component: SearchForm,
   args: {
     hideLabel: false,
+    searchPage: '#',
   },
   argTypes: {
     className: {
@@ -40,13 +40,6 @@ export default {
       },
     },
   },
-  decorators: [
-    (Story) => (
-      <IntlProvider locale="en">
-        <Story />
-      </IntlProvider>
-    ),
-  ],
 } as ComponentMeta<typeof SearchForm>;
 
 const Template: ComponentStory<typeof SearchForm> = (args) => (
diff --git a/src/components/organisms/forms/search-form.test.tsx b/src/components/organisms/forms/search-form.test.tsx
index 4e3d285..59a2f68 100644
--- a/src/components/organisms/forms/search-form.test.tsx
+++ b/src/components/organisms/forms/search-form.test.tsx
@@ -3,14 +3,14 @@ import SearchForm from './search-form';
 
 describe('SearchForm', () => {
   it('renders a search input', () => {
-    render(<SearchForm />);
+    render(<SearchForm searchPage="#" />);
     expect(
       screen.getByRole('searchbox', { name: 'Search for:' })
     ).toBeInTheDocument();
   });
 
   it('renders a submit button', () => {
-    render(<SearchForm />);
+    render(<SearchForm searchPage="#" />);
     expect(screen.getByRole('button', { name: 'Search' })).toBeInTheDocument();
   });
 });
diff --git a/src/components/organisms/forms/search-form.tsx b/src/components/organisms/forms/search-form.tsx
index 18b7c08..56d3895 100644
--- a/src/components/organisms/forms/search-form.tsx
+++ b/src/components/organisms/forms/search-form.tsx
@@ -4,18 +4,24 @@ import MagnifyingGlass from '@components/atoms/icons/magnifying-glass';
 import LabelledField, {
   type LabelledFieldProps,
 } from '@components/molecules/forms/labelled-field';
+import { useRouter } from 'next/router';
 import { FC, useState } from 'react';
 import { useIntl } from 'react-intl';
 import styles from './search-form.module.scss';
 
-export type SearchFormProps = Pick<LabelledFieldProps, 'hideLabel'>;
+export type SearchFormProps = Pick<LabelledFieldProps, 'hideLabel'> & {
+  /**
+   * The search page url.
+   */
+  searchPage: string;
+};
 
 /**
  * SearchForm component
  *
  * Render a search form.
  */
-const SearchForm: FC<SearchFormProps> = ({ hideLabel }) => {
+const SearchForm: FC<SearchFormProps> = ({ hideLabel, searchPage }) => {
   const intl = useIntl();
   const fieldLabel = intl.formatMessage({
     defaultMessage: 'Search for:',
@@ -28,10 +34,12 @@ const SearchForm: FC<SearchFormProps> = ({ hideLabel }) => {
     id: 'WMqQrv',
   });
 
+  const router = useRouter();
   const [value, setValue] = useState<string>('');
 
   const submitHandler = () => {
-    return;
+    router.push({ pathname: searchPage, query: { s: value } });
+    setValue('');
   };
 
   return (