jeremy-code

import React, { useCallback, useEffect, useRef } from "react";
import { useForm } from "react-hook-form";

import useScript from "../hooks/useScript";

type LocationFormData = {
  location: string;
};

const AutocompleteInput = () => {

jeremy-code

import React, { useCallback, useEffect, useRef } from "react";

import useScript from "../hooks/useScript";

const AutocompleteInput = () => {
  // Load the Google Maps API script asynchronously
  const status = useScript(
    `https://maps.googleapis.com/maps/api/js?key=${
      import.meta.env.VITE_GOOGLE_MAPS_API_KEY
    }&libraries=places`

jeremy-code

import { useEffect, useState } from "react";

type ScriptStatus = "idle" | "loading" | "ready" | "error";
type ScriptType = HTMLScriptElement | null;

function useScript(src: string): ScriptStatus {
  const [status, setStatus] = useState<ScriptStatus>(src ? "loading" : "idle");

  useEffect(() => {
    // Fetch existing script element by src

jeremy-code

import React from "react";
import { InputGroup, Input, InputLeftAddon, Select } from "@chakra-ui/react";

const PhoneInput = () => {
  return (
    <InputGroup>
      <InputLeftAddon px={0} bg="transparent">
        <Select variant="filled" borderRightRadius={0}>
          <option value="+1">+1</option>
        </Select>