Merge branch 'feat/styling-select' into 'develop'

Feat/styling select

See merge request software/fabcity-map/fabcity-map-frontend!19

src/components/Select.tsx

 import React from 'react';
 import type { Theme } from 'react-select';
-import ReactSelect, { NamedProps, StylesConfig } from 'react-select';
+import ReactSelect, { NamedProps, StylesConfig, components } from 'react-select';
+import Tag from './Tag';
+
+const Option = ({ children, data, ...rest }: { children: any; data: any }) => {
+  return (
+    <components.Option {...rest}>
+      <Tag color={data.value.color}>{children}</Tag>
+    </components.Option>
+  );
+};
 
 const Select = <OptionType, isMulti extends boolean>(props: NamedProps<OptionType, isMulti>): JSX.Element => {
   const customStyles: StylesConfig<OptionType, isMulti> = {
     control: (provided) => ({ ...provided, border: '0', borderRadius: '0.5em' }),
-    multiValue: (provided) => ({ ...provided, borderRadius: '999px', padding: '0 3px' }),
+    multiValue: (provided, state) => ({
+      ...provided,
+      backgroundColor: state?.data?.value?.color || 'grey',
+      borderRadius: '999px',
+      padding: '0 3px',
+    }),
     multiValueRemove: (provided) => ({
       ...provided,
       color: 'hsl(0, 0%, 50%)',
@@ -15,6 +29,9 @@ const Select = <OptionType, isMulti extends boolean>(props: NamedProps<OptionTyp
 
   return (
     <ReactSelect
+      components={{
+        Option,
+      }}
       theme={(theme): Theme => ({
         ...theme,
         // @ts-expect-error: ThemeConfig type from definitely-typed is not complete