Convert some components to Typescript
Gitlab: #30
Change-Id: I9fbd857ef93866609682fb46be8b04904ee4e66f
diff --git a/client/src/components/NewContactForm.tsx b/client/src/components/NewContactForm.tsx
new file mode 100644
index 0000000..06d0222
--- /dev/null
+++ b/client/src/components/NewContactForm.tsx
@@ -0,0 +1,39 @@
+import { SearchRounded } from '@mui/icons-material';
+import { InputAdornment, InputBase } from '@mui/material';
+import { ChangeEvent, FormEvent, useState } from 'react';
+
+type NewContactFormProps = {
+ onChange?: (v: string) => void;
+ onSubmit?: (v: string) => void;
+};
+
+export default function NewContactForm(props: NewContactFormProps) {
+ const [value, setValue] = useState('');
+
+ const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
+ setValue(event.target.value);
+ if (props.onChange) props.onChange(event.target.value);
+ };
+
+ const handleSubmit = (event: FormEvent<HTMLFormElement>) => {
+ event.preventDefault();
+ if (value && props.onSubmit) props.onSubmit(value);
+ };
+
+ return (
+ <form className="main-search" onSubmit={handleSubmit} noValidate autoComplete="off">
+ <InputBase
+ className="main-search-input"
+ type="search"
+ placeholder="Ajouter un contact"
+ value={value}
+ onChange={handleChange}
+ startAdornment={
+ <InputAdornment position="start">
+ <SearchRounded />
+ </InputAdornment>
+ }
+ />
+ </form>
+ );
+}