aboutsummaryrefslogtreecommitdiffstats
path: root/src/components/organisms/forms/search-form.tsx
diff options
context:
space:
mode:
authorArmand Philippot <git@armandphilippot.com>2023-09-22 19:34:01 +0200
committerArmand Philippot <git@armandphilippot.com>2023-10-24 12:23:48 +0200
commita6ff5eee45215effb3344cb5d631a27a7c0369aa (patch)
tree5051747acf72318b4fc5c18d603e3757fbefdfdb /src/components/organisms/forms/search-form.tsx
parent651ea4fc992e77d2f36b3c68f8e7a70644246067 (diff)
refactor(components): rewrite form components
Diffstat (limited to 'src/components/organisms/forms/search-form.tsx')
-rw-r--r--src/components/organisms/forms/search-form.tsx72
1 files changed, 0 insertions, 72 deletions
diff --git a/src/components/organisms/forms/search-form.tsx b/src/components/organisms/forms/search-form.tsx
deleted file mode 100644
index f80d295..0000000
--- a/src/components/organisms/forms/search-form.tsx
+++ /dev/null
@@ -1,72 +0,0 @@
-import { useRouter } from 'next/router';
-import { forwardRef, ForwardRefRenderFunction, useId, useState } from 'react';
-import { useIntl } from 'react-intl';
-import { Button, Form, MagnifyingGlass } from '../../atoms';
-import { LabelledField, type LabelledFieldProps } from '../../molecules';
-import styles from './search-form.module.scss';
-
-export type SearchFormProps = Pick<LabelledFieldProps, 'hideLabel'> & {
- /**
- * The search page url.
- */
- searchPage: string;
-};
-
-const SearchFormWithRef: ForwardRefRenderFunction<
- HTMLInputElement,
- SearchFormProps
-> = ({ hideLabel, searchPage }, ref) => {
- const intl = useIntl();
- const fieldLabel = intl.formatMessage({
- defaultMessage: 'Search for:',
- description: 'SearchForm: field accessible label',
- id: 'X8oujO',
- });
- const buttonLabel = intl.formatMessage({
- defaultMessage: 'Search',
- description: 'SearchForm: button accessible name',
- id: 'WMqQrv',
- });
-
- const router = useRouter();
- const [value, setValue] = useState<string>('');
-
- const submitHandler = () => {
- router.push({ pathname: searchPage, query: { s: value } });
- setValue('');
- };
-
- const id = useId();
-
- return (
- <Form className={styles.wrapper} grouped={false} onSubmit={submitHandler}>
- <LabelledField
- className={styles.field}
- hideLabel={hideLabel}
- id={`search-form-${id}`}
- label={fieldLabel}
- name="search-form"
- ref={ref}
- setValue={setValue}
- type="search"
- value={value}
- />
- <Button
- aria-label={buttonLabel}
- className={styles.btn}
- kind="neutral"
- shape="initial"
- type="submit"
- >
- <MagnifyingGlass className={styles.btn__icon} />
- </Button>
- </Form>
- );
-};
-
-/**
- * SearchForm component
- *
- * Render a search form.
- */
-export const SearchForm = forwardRef(SearchFormWithRef);