diff --git a/apps/studio/src/components/Searchbar.tsx b/apps/studio/src/components/Searchbar.tsx index c4b5f5182..8fd8e6ebb 100644 --- a/apps/studio/src/components/Searchbar.tsx +++ b/apps/studio/src/components/Searchbar.tsx @@ -1,4 +1,4 @@ -import { useMemo } from "react" +import { useMemo, useState } from "react" import { ComponentWithAs as _, Box, @@ -62,6 +62,10 @@ const MOCK_RECENTLY_EDITED = [ }, ] +const getTotalCount = (pages: { totalCount: number | null }[]) => { + return pages.reduce((acc, page) => acc + (page.totalCount ?? 0), 0) +} + interface SearchResultProps { type: ResourceType title: string @@ -90,7 +94,7 @@ const SearchResult = ({ type, title, permalink }: SearchResultProps) => { return ( - + {title} @@ -140,19 +144,20 @@ const SearchModal = ({ siteId, isOpen, onClose }: SearchModalProps) => { w="42.5rem" p={0} mt={`calc(${mt} - 1px)`} + boxShadow="md" > { px="1.25rem" pt="1.5rem" pb="1rem" + maxH="25.25rem" > - Recently edited on your site + {searchValue && isLoading && "Searching your websites high and low"} + {!searchValue && "Recently edited on your site"} + {data && + !isLoading && + `${getTotalCount(data.pages)} results found with ${searchValue} in title.`} @@ -178,6 +188,7 @@ const SearchModal = ({ siteId, isOpen, onClose }: SearchModalProps) => { flexDir="row" py="0.75rem" justifyContent="flex-start" + borderBottomRadius="md" > Tip: Type in the full title to get the most accurate search results. @@ -219,7 +230,7 @@ const SearchButton = (props: ButtonProps) => { flex="1" textStyle="body-2" > - {`What do you need to edit today? E.g., "Press release", "Speech by"`} + {`Search pages, collections, or folders by name. e.g. "Speech by Minister"`}