refactor settings page

client/src/Components/inputs/forms/FormAutoCompleteField.tsx

@@ -18,7 +18,10 @@ interface FormAutocompleteProps<T extends FieldValues, O extends AutocompleteOpt
 	placeholder?: string;
 }
 
-export const FormAutocomplete = <T extends FieldValues, O extends AutocompleteOption>({
+export const FormAutocompleteField = <
+	T extends FieldValues,
+	O extends AutocompleteOption,
+>({
 	name,
 	options,
 	fieldLabel,

client/src/Components/inputs/forms/FormSwitchField.tsx

@@ -13,11 +13,13 @@ import { SPACING } from "@/Utils/Theme/constants";
 interface FormSwitchProps<T extends FieldValues> {
 	name: FieldPath<T>;
 	label: string;
+	labelPlacement?: "start" | "end"; // left | right
 }
 
 export const FormSwitchField = <T extends FieldValues>({
 	name,
 	label,
+	labelPlacement = "end",
 }: FormSwitchProps<T>) => {
 	const { control } = useFormContext<T>();
 	const theme = useTheme();
@@ -29,14 +31,27 @@ export const FormSwitchField = <T extends FieldValues>({
 			render={({ field }) => (
 				<Stack
 					direction="row"
-					alignItems={"center"}
-					spacing={theme.spacing(SPACING.LG)}
+					alignItems="center"
+					spacing={labelPlacement === "start" ? undefined : theme.spacing(SPACING.LG)}
+					justifyContent={labelPlacement === "start" ? "space-between" : undefined}
 				>
-					<SwitchComponent
-						checked={field.value ?? false}
-						onChange={(e) => field.onChange(e.target.checked)}
-					/>
-					<Typography>{label}</Typography>
+					{labelPlacement === "start" ? (
+						<>
+							<Typography>{label}</Typography>
+							<SwitchComponent
+								checked={field.value ?? false}
+								onChange={(e) => field.onChange(e.target.checked)}
+							/>
+						</>
+					) : (
+						<>
+							<SwitchComponent
+								checked={field.value ?? false}
+								onChange={(e) => field.onChange(e.target.checked)}
+							/>
+							<Typography>{label}</Typography>
+						</>
+					)}
 				</Stack>
 			)}
 		/>