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

https://github.com/middlewarehq/middleware/assets/76566992/a77d01c9-4e81-4fb0-8cd9-3d8385fcd41e

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]

https://github.com/middlewarehq/middleware/assets/97456320/cb016828-2ecb-4ba9-b8f7-e0b7386c8e6c

@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]

https://github.com/middlewarehq/middleware/assets/97456320/4ed90bea-b480-4e13-8fcd-988461254bf0

@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.