Function Component

website/src/components/gource-input.tsx:35–378

({
  onSubmit,
  onCancel,
  isLoading,
  isGenerating,
  initialUrl = "",
  initialSettings,
}: GourceInputProps)

}

export default function Component({
  onSubmit,
  onCancel,
  isLoading,
  isGenerating,
  initialUrl = "",
  initialSettings,
}: GourceInputProps) {
  const [repoUrl, setRepoUrl] = useState(initialUrl);
  const [isPrivate, setIsPrivate] = useState(false);
  const [accessKey, setAccessKey] = useState("");
  const [isValidUrl, setIsValidUrl] = useState(false);
  const [isSubmitting, setIsSubmitting] = useState(false);
  const [isFiltersOpen, setIsFiltersOpen] = useState(false);
  const [settings, setSettings] = useState<GourceSettings>(
    initialSettings || {
      show_file_extension_key: false,
      show_usernames: true,
      show_dirnames: true,
      dir_font_size: 11,
      file_font_size: 10,
      user_font_size: 12,
    }
  );

  const inputRef = useRef<HTMLInputElement>(null);

  useEffect(() => {
    if (initialSettings) {
      setSettings(initialSettings);
    }
  }, [initialSettings]);

  useEffect(() => {
    const urlRegex =
      /^(https?:\/\/)?([\da-z\.-]+)\.([a-z\.]{2,6})([\/\w \.-]*)*\/?$/;
    setIsValidUrl(urlRegex.test(repoUrl));
  }, [repoUrl]);

  useEffect(() => {
    if (initialUrl) {
      setRepoUrl(initialUrl);
    }
  }, [initialUrl]);

  useEffect(() => {
    if (inputRef.current) {
      inputRef.current.focus();
    }
  }, []);

  async function handleSubmit(e: FormEvent<HTMLFormElement>) {
    e.preventDefault();
    if (isValidUrl && !isSubmitting && !isLoading && !isGenerating) {
      setIsSubmitting(true);
      try {
        await onSubmit(repoUrl, isPrivate ? accessKey : undefined, settings);
      } catch (error) {