Refactor: the input card and form

[a0m0rajab]

Describe the bug

While working #2062 I noticed that we have two issues here:

• in the highlight input form component has multilple useEffect function, should not we have the logic in one function?
• I think that component has similarity with contributor highlight card. https://github.com/search?q=repo%3Aopen-sauced%2Fapp%20setRepoTagSuggestions(%5B%5D)%3B&type=code

The logic of the two components is similar within the search comp.

<Search
                        isLoading={tagRepoSearchLoading}
                        placeholder="Repository Full Name (ex: open-sauced/open-sauced)"
                        className="!w-full text-md text-gra"
                        name={"query"}
                        suggestions={repoTagSuggestions}
                        onChange={(value) => setTaggedRepoSearchTerm(value)}
                        onSearch={(search) => setTaggedRepoSearchTerm(search as string)}
                      />

Steps to reproduce

N/A

Browsers

No response

Additional context (Is this in dev or production?)

No response

Code of Conduct

• I agree to follow this project's Code of Conduct

Contributing Docs

• I agree to follow this project's Contribution Docs

[github-actions]

Thanks for the issue, our team will look into it as soon as possible! If you would like to work on this issue, please wait for us to decide if it's ready. The issue will be ready to work on once we remove the "needs triage" label.

To claim an issue that does not have the "needs triage" label, please leave a comment that says ".take". If you have any questions, please reach out to us on Discord or follow up on the issue itself.

For full info on how to contribute, please check out our contributors guide.