status-im/nimbus-gui
2
0
Fork 0
mirror of https://github.com/status-im/nimbus-gui.git synced 2025-01-21 00:40:09 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: add css for custom autocomplete

Browse Source
This commit is contained in:
RadoslavDimchev 2023-09-01 15:20:07 +03:00
parent df9c8cc62c
commit 96ca1230fa
2 changed files with 24 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
src/pages/ValidatorOnboarding/KeyGeneration/AutocompleteInput.css Normal file
View File

@ -0,0 +1,16 @@
.suggestion-list {
max-height: 100px;
overflow-y: scroll;
border: 1px solid #ccc;
border-radius: 4px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.suggestion-item {
padding: 5px;
cursor: pointer;
}
.suggestion-item:hover {
background-color: #f1f1f1;
}

11
src/pages/ValidatorOnboarding/KeyGeneration/AutocompleteInput.tsx
View File

@ -4,6 +4,7 @@ import wordlist from 'web-bip39/wordlists/english'
import { RootState } from '../../../redux/store' import { RootState } from '../../../redux/store'
import { setMnemonic, setWord } from '../../../redux/ValidatorOnboarding/KeyGeneration/slice' import { setMnemonic, setWord } from '../../../redux/ValidatorOnboarding/KeyGeneration/slice'
import './AutocompleteInput.css'
type AutocompleteInputProps = { type AutocompleteInputProps = {
index: number index: number
@ -50,9 +51,13 @@ const AutocompleteInput = ({ index }: AutocompleteInputProps) => {
/> />
{isFocused && ( {isFocused && (
<div className="suggestion-list"> <div className="suggestion-list">
{suggestions.map(s => ( {suggestions.map(suggestion => (
<div key={s} className="suggestion-item" onClick={() => handleSuggestionClick(s)}> <div
{s} key={suggestion}
className="suggestion-item"
onClick={() => handleSuggestionClick(suggestion)}
>
{suggestion}
</div> </div>
))} ))}
</div> </div>