Search icon on homepage is now a link

Like, the little magnifying glass in the "Search all items", you can click it to get taken to the _big_ search page with the autocomplete filters and stuff
This commit is contained in:
Emi Matchu 2021-09-30 19:31:51 -07:00
parent 6efd542f49
commit d6654b704b

View file

@ -12,7 +12,7 @@ import {
InputGroup, InputGroup,
InputLeftElement, InputLeftElement,
InputRightElement, InputRightElement,
Link, Link as ChakraLink,
ListItem, ListItem,
Skeleton, Skeleton,
Textarea, Textarea,
@ -24,7 +24,7 @@ import {
VStack, VStack,
} from "@chakra-ui/react"; } from "@chakra-ui/react";
import { ArrowForwardIcon, SearchIcon } from "@chakra-ui/icons"; import { ArrowForwardIcon, SearchIcon } from "@chakra-ui/icons";
import { useHistory, useLocation } from "react-router-dom"; import { Link, useHistory, useLocation } from "react-router-dom";
import { useLazyQuery, useQuery } from "@apollo/client"; import { useLazyQuery, useQuery } from "@apollo/client";
import { import {
@ -333,15 +333,18 @@ function ItemsSearchField() {
return ( return (
<form <form
onSubmit={() => { onSubmit={(e) => {
e.preventDefault();
if (query) { if (query) {
history.push(`/items/search/${encodeURIComponent(query)}`); history.push(`/items/search/${encodeURIComponent(query)}`);
} }
}} }}
> >
<InputGroup size="sm"> <InputGroup size="sm">
<InputLeftElement pointerEvents="none"> <InputLeftElement>
<Box as={Link} to="/items/search" display="flex">
<SearchIcon color="gray.400" /> <SearchIcon color="gray.400" />
</Box>
</InputLeftElement> </InputLeftElement>
<Input <Input
value={query} value={query}
@ -694,12 +697,12 @@ function FeedbackFormPitch() {
<ListItem>Better item list pages</ListItem> <ListItem>Better item list pages</ListItem>
<ListItem>Outfit saving! Try it out!!</ListItem> <ListItem>Outfit saving! Try it out!!</ListItem>
<ListItem> <ListItem>
<Link <ChakraLink
href="https://twitter.com/NeopetsDTI" href="https://twitter.com/NeopetsDTI"
textDecoration="underline" textDecoration="underline"
> >
See more on Twitter! See more on Twitter!
</Link> </ChakraLink>
</ListItem> </ListItem>
</UnorderedList> </UnorderedList>
</Box> </Box>