local-weather/components/LocationSearch.tsx

"use client";
import { useState } from "react";
import { getLocation } from "@/app/actions";
import { LocationType } from "@/types/types";

export default function LocationSearch(props: any) {
  const [searchLocation, setSearchLocation] = useState("Sluseholmen");
  const setLocation = props.setLocation;
  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setSearchLocation(e.target.value);
  };
  const handleKeyDown = (e: any) => {
    if (e.key === "Enter") {
      const location: LocationType = getLocation(searchLocation);
      setLocation(location);
    }
  };

  return (
    <>
      <input
        id="location"
        type="text"
        placeholder="enter a location to get the weather"
        value={searchLocation}
        onChange={handleChange}
        onKeyDown={handleKeyDown}
      />
      <label htmlFor="location" className="hidden">
        Enter location to get the weather!
      </label>
      <p>{searchLocation}</p>
    </>
  );
}