Add search

shafiqrbs · Sep 14, 2023 · 66de37b · 66de37b
1 parent ef36f10
commit 66de37b
Show file tree

Hide file tree

Showing 4 changed files with 42 additions and 2 deletions.
diff --git a/components/Search/Search.tsx b/components/Search/Search.tsx
@@ -0,0 +1,35 @@
+import { rem } from '@mantine/core';
+import { Spotlight, createSpotlight } from '@mantine/spotlight';
+import { IconSearch } from '@tabler/icons-react';
+import { useRouter } from 'next/router';
+
+export const [searchStore, searchHandlers] = createSpotlight();
+
+export function Search({ data }: { data: any[] }) {
+  const router = useRouter();
+
+  const actions = data?.map((item) => ({
+    id: item.component,
+    label: item.component,
+    description: item.attributes.title,
+    onClick: () => router.push(`/component/${item.slug}`),
+  }));
+
+  return (
+    <Spotlight
+      store={searchStore}
+      shortcut={['mod + K', 'mod + P', '/']}
+      actions={actions}
+      tagsToIgnore={[]}
+      highlightQuery
+      clearQueryOnClose
+      radius="md"
+      limit={7}
+      nothingFound="Nothing found..."
+      searchProps={{
+        leftSection: <IconSearch style={{ width: rem(20), height: rem(20) }} />,
+        placeholder: 'Search components...',
+      }}
+    />
+  );
+}
diff --git a/components/Search/index.ts b/components/Search/index.ts
@@ -0,0 +1 @@
+export { Search, searchHandlers } from './Search';
diff --git a/components/Shell/Shell.tsx b/components/Shell/Shell.tsx
@@ -7,6 +7,7 @@ import {
   meta,
   SearchMobileControl,
 } from '@mantine/ds';
+import { searchHandlers } from '../Search';
 import classes from './Shell.module.css';
 
 interface ShellProps {
@@ -24,13 +25,13 @@ export function Shell({ children }: ShellProps) {
 
           <HeaderControls
             visibleFrom="sm"
-            onSearch={() => {}}
+            onSearch={searchHandlers.open}
             githubLink={meta.gitHubLinks.mantineUi}
             withDirectionToggle={false}
           />
 
           <Group hiddenFrom="sm">
-            <SearchMobileControl onSearch={() => {}} />
+            <SearchMobileControl onSearch={searchHandlers.open} />
             <ColorSchemeControl />
           </Group>
         </Container>

diff --git a/pages/_app.tsx b/pages/_app.tsx
@@ -3,10 +3,12 @@ import '@mantine/core/styles.css';
 import '@mantine/code-highlight/styles.css';
 import '@mantine/carousel/styles.css';
 import '@mantine/dropzone/styles.css';
+import '@mantine/spotlight/styles.css';
 import '@mantine/ds/styles.css';
 import Head from 'next/head';
 import { MantineProvider, DirectionProvider } from '@mantine/core';
 import { HotKeysHandler } from '@/components/HotKeysHandler';
+import { Search } from '@/components/Search';
 import { theme } from '../theme';
 
 export default function App({ Component, pageProps }: any) {
@@ -25,6 +27,7 @@ export default function App({ Component, pageProps }: any) {
         <MantineProvider theme={theme} defaultColorScheme="auto">
           <HotKeysHandler />
           <Component {...pageProps} />
+          <Search data={pageProps.allComponents} />
         </MantineProvider>
       </DirectionProvider>
     </>
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		export { Search, searchHandlers } from './Search';