diff --git a/packages/app/src/components/quick-search/content/index.tsx b/packages/app/src/components/quick-search/content/index.tsx
deleted file mode 100644
index d416c3598d..0000000000
--- a/packages/app/src/components/quick-search/content/index.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import React from 'react';
-import JumpTo from './jumpTo';
-import { Command } from 'cmdk';
-import SearchResult from './searchResult';
-
-const Result = (props: { query: string }) => {
- const query = props.query;
-
- return (
-
- {query ? : }
-
- );
-};
-
-export default Result;
diff --git a/packages/app/src/components/quick-search/content/jumpTo.tsx b/packages/app/src/components/quick-search/content/jumpTo.tsx
deleted file mode 100644
index 8a94daf180..0000000000
--- a/packages/app/src/components/quick-search/content/jumpTo.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-import React from 'react';
-import { FavouritesIcon, TrashIcon, AllPagesIcon } from '@blocksuite/icons';
-import Link from 'next/link';
-import { StyledJumpTo } from '../style';
-import { useModal } from '@/providers/global-modal-provider';
-const JumpTo = () => {
- const { triggerQuickSearchModal } = useModal();
- return (
-
- Jump to
- triggerQuickSearchModal()}
- >
-
- All pages
-
- triggerQuickSearchModal()}
- >
-
- Favourites
-
- triggerQuickSearchModal()}
- >
-
- Trash
-
-
- );
-};
-
-export default JumpTo;
diff --git a/packages/app/src/components/quick-search/content/searchResult/index.tsx b/packages/app/src/components/quick-search/content/searchResult/index.tsx
deleted file mode 100644
index e9b9c95e4f..0000000000
--- a/packages/app/src/components/quick-search/content/searchResult/index.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-import { useEffect, useState } from 'react';
-import NotFound from './not-found';
-import { Command } from 'cmdk';
-import { useEditor } from '@/providers/editor-provider';
-
-const SearchResult = (props: { query: string }) => {
- const { search, openPage, pageList } = useEditor();
- const [results, setResults] = useState(new Map());
- const query = props.query;
- useEffect(() => {
- return setResults(search(query));
- //Save the Map obtained from the search as state
- }, [query, search]);
- const pageIds = [...results.values()];
-
- const resultsPageMeta = pageList.filter(
- page => pageIds.indexOf(page.id) > -1
- );
-
- return (
- <>
-
- {resultsPageMeta.map(result => {
- return {result.title};
- })}
-
- );
-};
-
-export default SearchResult;
diff --git a/packages/app/src/components/quick-search/content/searchResult/not-found.tsx b/packages/app/src/components/quick-search/content/searchResult/not-found.tsx
deleted file mode 100644
index e81d7cdafd..0000000000
--- a/packages/app/src/components/quick-search/content/searchResult/not-found.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-import React from 'react';
-import { Command, useCommandState } from 'cmdk';
-
-const NotFound = () => {
- const search = useCommandState(state => state.search);
- // eslint-disable-next-line react/no-unescaped-entities
- return No results found for "{search}".;
-};
-
-export default NotFound;
diff --git a/packages/app/src/components/quick-search/footer.tsx b/packages/app/src/components/quick-search/footer.tsx
index 7f176c9fb0..2445c405ed 100644
--- a/packages/app/src/components/quick-search/footer.tsx
+++ b/packages/app/src/components/quick-search/footer.tsx
@@ -3,26 +3,21 @@ import { AddIcon } from '@blocksuite/icons';
import { StyledModalFooterContent } from './style';
import { useEditor } from '@/providers/editor-provider';
import { useModal } from '@/providers/global-modal-provider';
-import { IconButton } from '@/ui/button';
-const QuickSearchFooter = () => {
+export const Footer = () => {
const { createPage, getPageMeta, openPage } = useEditor();
const { triggerQuickSearchModal } = useModal();
return (
-
- {
- const page = createPage();
- const pageMeta = getPageMeta((await page).id);
- pageMeta && openPage(pageMeta.id);
- triggerQuickSearchModal();
- }}
- >
-
-
+ {
+ const page = createPage();
+ const pageMeta = getPageMeta((await page).id);
+ pageMeta && openPage(pageMeta.id);
+ triggerQuickSearchModal();
+ }}
+ >
+
New page
);
};
-
-export default QuickSearchFooter;
diff --git a/packages/app/src/components/quick-search/index.tsx b/packages/app/src/components/quick-search/index.tsx
index c0ee637c92..e026552630 100644
--- a/packages/app/src/components/quick-search/index.tsx
+++ b/packages/app/src/components/quick-search/index.tsx
@@ -6,9 +6,9 @@ import {
StyledModalDivider,
StyledShortcut,
} from './style';
-import Input from './input';
-import Result from './content';
-import QuickSearchFooter from './footer';
+import { Input } from './input';
+import { Results } from './results';
+import { Footer } from './footer';
import { Command } from 'cmdk';
import { useEffect, useState } from 'react';
import { useModal } from '@/providers/global-modal-provider';
@@ -57,16 +57,13 @@ export const QuickSearch = ({ open, onClose }: TransitionsModalProps) => {
-
+
-
-
-
-
+
+
+
);
};
-
-export default QuickSearch;
diff --git a/packages/app/src/components/quick-search/input.tsx b/packages/app/src/components/quick-search/input.tsx
index 8da7dfc24e..fb59344eb7 100644
--- a/packages/app/src/components/quick-search/input.tsx
+++ b/packages/app/src/components/quick-search/input.tsx
@@ -2,7 +2,7 @@ import React, { Dispatch, SetStateAction } from 'react';
import { SearchIcon } from '@blocksuite/icons';
import { StyledInputContent, StyledLabel } from './style';
import { Command } from 'cmdk';
-const Input = (props: {
+export const Input = (props: {
query: string;
setQuery: Dispatch>;
}) => {
@@ -19,5 +19,3 @@ const Input = (props: {
);
};
-
-export default Input;
diff --git a/packages/app/src/components/quick-search/results.tsx b/packages/app/src/components/quick-search/results.tsx
new file mode 100644
index 0000000000..307c5561d9
--- /dev/null
+++ b/packages/app/src/components/quick-search/results.tsx
@@ -0,0 +1,80 @@
+import { Command } from 'cmdk';
+import { StyledListItem } from './style';
+import Link from 'next/link';
+import { useModal } from '@/providers/global-modal-provider';
+import { AllPagesIcon, FavouritesIcon, TrashIcon } from '@blocksuite/icons';
+import { useEditor } from '@/providers/editor-provider';
+import { useEffect, useState } from 'react';
+
+export const Results = (props: { query: string }) => {
+ const { triggerQuickSearchModal } = useModal();
+
+ const query = props.query;
+ const { search, openPage, pageList } = useEditor();
+ const [results, setResults] = useState(new Map());
+ useEffect(() => {
+ return setResults(search(query));
+ //Save the Map obtained from the search as state
+ }, [query, search]);
+ const pageIds = [...results.values()];
+
+ const resultsPageMeta = pageList.filter(
+ page => pageIds.indexOf(page.id) > -1
+ );
+ return (
+
+ No results found for "{query}".
+
+ {resultsPageMeta.map(result => {
+ return (
+ {
+ openPage(result.id);
+ triggerQuickSearchModal();
+ }}
+ value={result.title}
+ >
+ {result.title}
+
+ );
+ })}
+
+
+
+
+ triggerQuickSearchModal()}
+ >
+
+ All pages
+
+
+
+
+
+ triggerQuickSearchModal()}
+ >
+
+ Favourites
+
+
+
+
+
+ triggerQuickSearchModal()}
+ >
+
+ Trash
+
+
+
+
+
+ );
+};
diff --git a/packages/app/src/components/quick-search/style.ts b/packages/app/src/components/quick-search/style.ts
index d85f1222a6..069f49c226 100644
--- a/packages/app/src/components/quick-search/style.ts
+++ b/packages/app/src/components/quick-search/style.ts
@@ -42,14 +42,13 @@ export const StyledJumpTo = styled('div')(({ theme }) => {
':visited': {
color: theme.colors.popoverColor,
},
- ':hover': {
- color: theme.colors.primaryColor,
- },
- transition: `color .15s`,
+ transition: 'background .15s, color .15s',
svg: {
+ color: 'inherit',
marginBottom: '2px',
},
span: {
+ color: 'inherit',
marginLeft: '12px',
lineHeight: '22px',
},
@@ -111,20 +110,50 @@ export const StyledModalFooter = styled('div')(({ theme }) => {
fontSize: theme.font.sm,
lineHeight: '20px',
textAlign: 'center',
+ ...displayFlex('center', 'center'),
color: theme.colors.popoverColor,
margin: '16px 0',
};
});
-export const StyledModalFooterContent = styled('div')(({ theme }) => {
+export const StyledModalFooterContent = styled.button(({ theme }) => {
return {
+ width: '572px',
+ height: '32px',
fontSize: theme.font.sm,
lineHeight: '20px',
textAlign: 'center',
...displayFlex('center', 'center'),
color: theme.colors.popoverColor,
- margin: '16px 0',
- span: {
- marginLeft: '12px',
+ borderRadius: '5px',
+ transition: 'background .15s, color .15s',
+ '>svg': {
+ fontSize: '20px',
+ marginRight: '12px',
+ },
+ ':hover': {
+ color: theme.colors.primaryColor,
+ backgroundColor: theme.colors.hoverBackground,
+ },
+ };
+});
+export const StyledListItem = styled.button(({ theme }) => {
+ return {
+ width: '572px',
+ height: '32px',
+ marginTop: '12px',
+ fontSize: theme.font.sm,
+ color: theme.colors.popoverColor,
+ paddingLeft: '12px',
+ borderRadius: '5px',
+ ...displayFlex('flex-start', 'center'),
+ '>svg': {
+ fontSize: '20px',
+ marginRight: '12px',
+ },
+ transition: 'background .15s, color .15s',
+ ':hover': {
+ color: theme.colors.primaryColor,
+ backgroundColor: theme.colors.hoverBackground,
},
};
});