Feat/improve search example (#56)

* feat: include empty state & no results views in search example

* fix(docs): update SDK Explorer url

Author: colepeters

apps/sdk-explorer/README.md

@@ -1,6 +1,6 @@
 # SDK Explorer
 
-👉🏻 **[https://sdk-examples.sanity.dev](https://sdk-examples.sanity.dev)**
+👉🏻 **[https://sdk-explorer.sanity.io](https://sdk-explorer.sanity.io)**
 
 The Sanity App SDK Explorer contains an assortment of example interfaces built with our React SDK’s hooks. The purpose of the Explorer is to demonstrate how these hooks can be used to build out interfaces powered by Sanity, with a variety of approaches to styling.
 

apps/sdk-explorer/src/examples/document-collections/DocumentSearch/DocumentSearch.tsx

@@ -43,12 +43,45 @@ export default function DocumentSearch(): JSX.Element {
   // Create a state variable for keeping track of the search input’s value
   const [search, setSearch] = useState('')
 
-  const {data: movies} = useDocuments({
+  const {data: movies, count} = useDocuments({
     documentType: 'movie',
     // Pass the `search` state variable to the `useDocuments` hook’s `search` parameter
     search,
   })
 
+  function EmptyState() {
+    return (
+      <Card tone="primary" radius={2} shadow={1} padding={4}>
+        Start typing in the input above to search for movies
+      </Card>
+    )
+  }
+
+  function NoResults() {
+    return (
+      <Card tone="caution" radius={2} shadow={1} padding={4}>
+        We couldn’t find any movies with content matching the search term ‘{search}’. Try something
+        else?
+      </Card>
+    )
+  }
+
+  function Results() {
+    return movies.map((movie) => (
+      <Suspense key={movie.documentId}>
+        <DocumentResult documentHandle={movie} />
+      </Suspense>
+    ))
+  }
+
+  let Component
+
+  if (search === '') {
+    Component = EmptyState
+  } else if (count === 0) {
+    Component = NoResults
+  } else Component = Results
+
   return (
     <ExampleLayout
       title="Document search"
@@ -57,7 +90,7 @@ export default function DocumentSearch(): JSX.Element {
       styling="Sanity UI"
       summary="This example passes a state variable to the useDocuments hook’s ‘search’ argument, enabling the creation of a dynamic search interface for documents in the targeted dataset(s). (Note: the ‘search’ parameter currently searches for matches across all of a document’s string fields.)"
     >
-      <Stack space={5}>
+      <Stack space={5} marginBottom={4}>
         <Stack space={3}>
           <Label htmlFor="movieSearch">Enter your search term:</Label>
           {/* Use a search input to set the value of the `search` state variable */}
@@ -71,13 +104,7 @@ export default function DocumentSearch(): JSX.Element {
           />
         </Stack>
 
-        {search === ''
-          ? ''
-          : movies.map((movie) => (
-              <Suspense key={movie.documentId}>
-                <DocumentResult documentHandle={movie} />
-              </Suspense>
-            ))}
+        <Component />
       </Stack>
     </ExampleLayout>
   )