✨ Add icon picker for service icon

Co-authored-by: Meier Lukas <meierschlumpf@gmail.com>

src/components/Dashboard/Modals/EditService/Tabs/AppereanceTab/AppereanceTab.tsx

@@ -1,8 +1,9 @@
-import { Tabs, TextInput, createStyles } from '@mantine/core';
+import { createStyles, Flex, Tabs, TextInput } from '@mantine/core';
 import { UseFormReturnType } from '@mantine/form';
 import { IconPhoto } from '@tabler/icons';
 import { useTranslation } from 'next-i18next';
 import { ServiceType } from '../../../../../../types/service';
+import { IconSelector } from './IconSelector/IconSelector';
 
 interface AppearanceTabProps {
   form: UseFormReturnType<ServiceType, (values: ServiceType) => ServiceType>;
@@ -24,20 +25,35 @@ export const AppearanceTab = ({ form }: AppearanceTabProps) => {
 
   return (
     <Tabs.Panel value="appearance" pt="lg">
-      <TextInput
-        icon={<Image />}
-        label="Service Icon"
-        variant="default"
-        defaultValue={form.values.appearance.iconUrl}
-        {...form.getInputProps('appearance.iconUrl')}
-        withAsterisk
-        required
-      />
+      <Flex gap={5}>
+        <TextInput
+          defaultValue={form.values.appearance.iconUrl}
+          className={classes.textInput}
+          icon={<Image />}
+          label="Service Icon"
+          variant="default"
+          withAsterisk
+          required
+          {...form.getInputProps('appearance.iconUrl')}
+        />
+        <IconSelector
+          onChange={(item) =>
+            form.setValues({
+              appearance: {
+                iconUrl: item.url,
+              },
+            })
+          }
+        />
+      </Flex>
     </Tabs.Panel>
   );
 };
 
 const useStyles = createStyles(() => ({
+  textInput: {
+    flexGrow: 1,
+  },
   iconImage: {
     objectFit: 'contain',
     width: 20,