added functionality to search bar

This commit is contained in:
plebbitor
2023-04-01 15:09:04 +02:00
parent d5166dea86
commit de7e656c52
+25 -6
View File
@@ -1,6 +1,6 @@
import React, { useEffect } from 'react'; import React, { useEffect, useRef } from 'react';
import useAppStore from '../../useAppStore'; import useAppStore from '../../useAppStore';
import { Link } from 'react-router-dom'; import { Link, useNavigate } from 'react-router-dom';
import { Container, Header, Logo, Page, Search, About, AboutTitle, AboutContent, Boards, BoardsTitle, BoardsContent, Footer } from './styles/Home.styled'; import { Container, Header, Logo, Page, Search, About, AboutTitle, AboutContent, Boards, BoardsTitle, BoardsContent, Footer } from './styles/Home.styled';
@@ -13,6 +13,9 @@ const Home = () => {
setSelectedTitle setSelectedTitle
} = useAppStore(state => state); } = useAppStore(state => state);
const inputRef = useRef(null);
const navigate = useNavigate();
// prevent dark mode // prevent dark mode
useEffect(() => { useEffect(() => {
setBodyStyle({ setBodyStyle({
@@ -35,10 +38,26 @@ const Home = () => {
</Header> </Header>
<Page> <Page>
<Search> <Search>
<form> <input type="text" placeholder='"board.eth" or "12D3KooW..."' ref={inputRef} onKeyDown={
<input type="text" placeholder='"board.eth" or "12D3KooW..."' disabled /> (event) => {
<input type="submit" value="Search" disabled /> if (event.key === "Enter") {
</form> event.preventDefault();
const address = inputRef.current.value;
if (address) {
setSelectedAddress(address);
navigate(`/${address}`)
}
}
}} />
<input type="submit" value="Search" onClick={
() => {
const address = inputRef.current.value;
if (address) {
setSelectedAddress(address);
navigate(`/${address}`)
}
}
} />
</Search> </Search>
<About> <About>
<AboutTitle> <AboutTitle>