Sid Gifari File Manager

Sid Gifari File Manager

🏠 Root / home / genremedia08 / musicjukebox.overlookedtracks.com / common / resources / client / admin / settings /

Editing: settings-error-group.tsx

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>
  );
}