Added country selector component

[kirustar14]

Tracking Info

Resolves #<45>

Changes

I added a country selector component using the react-select and react-select-country-list libraries.

Testing

I put the country selector on the page.tsx and tested to see if it showed up.

Confirmation of Change

[Miyuki-L]

Great Work.

Just a few changes to add more controll and changability to the component to match the needs of the design.

Also address the linter errors

[Miyuki-L]

have this taking in the p[ace holder text as a prop since place holder text changes depending on design

[Miyuki-L]

The state should be controled outside the component

i.e. we pass in the value and the set function this way we know the values when we use the component in the form

Something similar to this

import Select from "react-select";
import countryList from "react-select-country-list";

const CountrySelector = ({ value, onChange }) => {
  const options = useMemo(() => countryList().getData(), []);

  return (
    <Select
      options={options}
      value={options.find((option) => option.value === value)}
      onChange={(selected) => onChange(selected?.value)} // Pass value to parent
      isSearchable
    />
  );
};

export default CountrySelector;```

If you want to learn more its controlled vs uncontrolled components https://react.dev/learn/sharing-state-between-components#controlled-and-uncontrolled-components

[Miyuki-L]

right now the element size changes depending on the content. We need to be able to control its width so that we can match it to the design

Two option:

1. pass in a width prop which is then used to style the comopnent
2. Find a way so it takes the full width of the parent component i.e. <div> <CountrySelector/> </div> so that the element size will change depending on the size of div.

[Miyuki-L]

Wrap this in a use Callback

This error is showing up

I did something like this and it went away since every rerender its creating this function which we also don't really want to do that we
const changeHandler = useCallback( (selectedOption: SingleValue<CountryOption>) => { setValue(selectedOption ?? null); }, [setValue] );