docs(examples): align react-instantsearch example with other flavors (#968)

Co-authored-by: Sarah Dayan <[email protected]>

Author: dhayab

examples/react-instantsearch-hooks/src/components/Autocomplete.tsx

@@ -167,7 +167,6 @@ export function Autocomplete({
           ...source,
           sourceId: 'querySuggestionsPlugin',
           onSelect({ item }) {
-            console.log('onselect', item.__autocomplete_qsCategory);
             setInstantSearchUiState({
               query: item.query,
               category: item.__autocomplete_qsCategory || '',

examples/react-instantsearch/capture.png

@@ -1,25 +1,113 @@
-em {
-  background: cyan;
-  font-style: normal;
+* {
+  box-sizing: border-box;
 }
 
-.container {
-  max-width: 800px;
+body {
+  margin: 0;
+  padding: 0;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica,
+    Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
+  background-color: rgb(244, 244, 249);
+  color: rgb(65, 65, 65);
+}
+
+a {
+  color: var(--aa-primary-color);
+  text-decoration: none;
+}
+
+.header {
+  background: rgb(252 252 255 / 92%);
+  box-shadow: 0 0 0 1px rgba(35, 38, 59, 0.05),
+    0 1px 3px 0 rgba(35, 38, 59, 0.15);
+  padding: 0.5rem 0;
+  position: fixed;
+  top: 0;
+  width: 100%;
+}
+
+.header-wrapper {
+  align-items: center;
+  display: grid;
+  grid-template-columns: 100px 1fr;
+}
+
+.header-nav {
+  font-weight: 500;
+}
+
+.wrapper {
   margin: 0 auto;
-  padding: 1rem;
+  max-width: 1200px;
+  padding: 0 1.5rem;
+  width: 100%;
 }
 
-.search-panel {
+.container {
+  margin-top: 3.5rem;
+  padding: 1.5rem;
   display: grid;
-  grid-template-columns: 200px 1fr;
-  gap: 2rem;
+  gap: 1rem;
+  grid-template-columns: 1fr 3fr;
+}
+
+/* Autocomplete */
+
+.aa-Panel {
+  position: fixed;
+}
+
+/* InstantSearch */
+
+.ais-Hits-list {
+  display: grid;
+  gap: 1rem;
+  grid-template-columns: 1fr 1fr 1fr;
+}
+
+.ais-Hits-item {
+  padding: 1rem !important;
+}
+
+.hit {
+  align-items: center;
+  display: grid;
+  gap: 1rem;
+}
+
+.hit h1 {
+  font-size: 1rem;
+}
+
+.hit p {
+  font-size: 0.8rem;
+  opacity: 0.8;
+}
+
+.hit-image {
+  align-items: center;
+  display: flex;
+  height: 100px;
+  justify-content: center;
+}
+
+.hit-image img {
+  max-height: 100%;
+}
+
+.ais-HierarchicalMenu-item--selected.ais-HierarchicalMenu-item--parent
+  > div:first-of-type
+  .ais-HierarchicalMenu-label {
+  font-weight: bold;
 }
 
-.aa-Form {
-  margin-bottom: 1rem;
+.ais-HierarchicalMenu-item--selected:not(.ais-HierarchicalMenu-item--parent)
+  .ais-HierarchicalMenu-label {
+  font-weight: bold;
 }
 
-.pagination {
-  margin: 2rem auto;
-  text-align: center;
+.ais-Pagination {
+  display: flex;
+  justify-content: center;
+  margin: 2rem 0;
 }