Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix: Styled input field #475

Merged
merged 3 commits into from
Jul 15, 2023
Merged

fix: Styled input field #475

Changes from 1 commit
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
50486ce
Styled input field
Sadeedpv Jul 10, 2023
94ca783
Update src/components/Hero.tsx
Sadeedpv Jul 14, 2023
65a4163
Update src/components/Hero.tsx
Sadeedpv Jul 14, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
58 changes: 30 additions & 28 deletions src/components/Hero.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -73,35 +73,37 @@ const Hero = () => {
value={comboBoxSelection}
onChange={setComboBoxSelection}
>
<div className="mt-11 px-4 gap-x-2.5 py-2.5 bg-white shadow-2xl rounded-2xl md:min-w-[26.375rem] flex">
<img
alt="search icon"
src={searchNormal}
/>

<Combobox.Button
ref={comboButtonRef}
>
<Combobox.Input
ref={searchBoxRef}
className="w-full outline-none text-base text-lightSlate"
displayValue={() => searchTerm}
placeholder="Search repositories"
type="text"
value={searchTerm}
onChange={e => setValueDebounced(e.target.value)}
onFocus={() => setFocus(true)}
onBlur={() =>
setTimeout(() => {
setFocus(false);
}, 200)}
onKeyUp={(event: React.KeyboardEvent) => {
if (event.key === "Enter") {
window.open(comboBoxSelection, "_blank", "noreferrer");
}
}}
<div className="mt-11 px-4 gap-x-2.5 py-2.5 bg-white shadow-2xl rounded-2xl md:min-w-[26.375rem] flex justify-between">
Sadeedpv marked this conversation as resolved.
Show resolved Hide resolved
<div className="flex">
Sadeedpv marked this conversation as resolved.
Show resolved Hide resolved
Sadeedpv marked this conversation as resolved.
Show resolved Hide resolved
<img
alt="search icon"
src={searchNormal}
/>
</Combobox.Button>

<Combobox.Button
ref={comboButtonRef}
>
<Combobox.Input
ref={searchBoxRef}
className="w-full outline-none text-base text-lightSlate"
displayValue={() => searchTerm}
placeholder="Search repositories"
type="text"
value={searchTerm}
onChange={e => setValueDebounced(e.target.value)}
onFocus={() => setFocus(true)}
onBlur={() =>
setTimeout(() => {
setFocus(false);
}, 200)}
onKeyUp={(event: React.KeyboardEvent) => {
if (event.key === "Enter") {
window.open(comboBoxSelection, "_blank", "noreferrer");
}
}}
/>
</Combobox.Button>
</div>

<img
alt="command k"
Expand Down
Loading