first commit

common/resources/client/admin/settings/settings-error-group.tsx

@@ -0,0 +1,48 @@
+import {ReactNode, useEffect, useRef} from 'react';
+import {useFormContext} from 'react-hook-form';
+import clsx from 'clsx';
+
+interface Props {
+  children: (isInvalid: boolean) => ReactNode;
+  name: string;
+  separatorBottom?: boolean;
+  separatorTop?: boolean;
+}
+export function SettingsErrorGroup({
+  children,
+  name,
+  separatorBottom = true,
+  separatorTop = true,
+}: Props) {
+  const {
+    formState: {errors},
+  } = useFormContext<Record<string, string>>();
+
+  const ref = useRef<HTMLDivElement>(null);
+  const error = errors[name];
+
+  useEffect(() => {
+    if (error) {
+      ref.current?.scrollIntoView({behavior: 'smooth'});
+    }
+  }, [error]);
+
+  return (
+    <div
+      className={clsx(
+        separatorBottom && 'border-b mb-20 pb-20',
+        separatorTop && 'border-t mt-20 pt-20',
+        error && 'border-y-error'
+      )}
+      ref={ref}
+    >
+      {children(!!error)}
+      {error && (
+        <div
+          className="text-danger text-sm mt-20"
+          dangerouslySetInnerHTML={{__html: error.message!}}
+        />
+      )}
+    </div>
+  );
+}