✨ Add mantine context modals

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

@@ -0,0 +1,24 @@
+import { 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';
+
+interface AppearanceTabProps {
+  form: UseFormReturnType<ServiceType, (values: ServiceType) => ServiceType>;
+}
+
+export const AppearanceTab = ({ form }: AppearanceTabProps) => {
+  const { t } = useTranslation('');
+  return (
+    <Tabs.Panel value="appearance" pt="lg">
+      <TextInput
+        icon={<IconPhoto />}
+        label="Service Icon"
+        variant="default"
+        defaultValue={form.values.appearance.iconUrl}
+        {...form.getInputProps('serviceIcon')}
+      />
+    </Tabs.Panel>
+  );
+};