Add search suggestions for repo-search

[e-for-eshaan]

Why do we need this ?

it is unclear right now that the repo-search allows passing of org-names.
eg: to search this repo, one can type middlewarehq/middleware.

Hence it is important to implement a subtle CTA. A place holder of such sort can be used to display some suggestions like:

search HigherOrderCO/Bend
search middlewarehq/middleware
search RocketChat/Rocket.Chat

Screen.Recording.2024-06-21.at.10.06.39.PM.mov

Acceptance Criteria

• try not to add any additional packages

• theme must be kept similiar to the pre-existing UI

• write optimized and efficient code

• TODO 1

• TODO 2

• TODO 3

Further Comments / References

[KartikChawla09]

Middleware.mp4

@e-for-eshaan Does this solve the purpose? I can make it better by adding the slide animations if it does.

[e-for-eshaan]

Middleware.mp4
@e-for-eshaan Does this solve the purpose? I can make it better by adding the slide animations if it does.

Hey @KartikChawla09

• the transition looks choppy, we need to add some smooth animations
• use repos which are both popular and have short names [golang/go, mozilla/rust, apple/swift, oven-sh/bun]
• maybe remove the quotes "tensorflow/tensorflow"

Feel free to ask for any other questions and doubts, or even to discuss the code-approach, we'll be glad to help!

[KartikChawla09]

Thank you very much for the feedback, I have changed the names of the repos to the ones mentioned. Also, I have removed the quotes. Do you have any suggestions regarding how I should go about adding the animations to the text without using additional packages.

Update : I was reading the documentation of Material UI (since it is already being used) and came across the Slide component. Maybe it will do the job.

[e-for-eshaan]

Well, this is how i did it, hope this helps!

https://codesandbox.io/p/sandbox/trying-changing-placeholders-ttxq6z?file=%2Fsrc%2FApp.tsx

[KartikChawla09]

SlideAnimation.mp4

@e-for-eshaan can you check this once ? Earlier I was implementing it using the Slide MUI Component but now I have done it using your approch. If this looks fine I will raise a PR.

Update:

Just fixed the empty space in the label as well.