diff --git a/packages/app/src/components/quick-search/content/index.tsx b/packages/app/src/components/quick-search/content/index.tsx new file mode 100644 index 0000000000..9fca452050 --- /dev/null +++ b/packages/app/src/components/quick-search/content/index.tsx @@ -0,0 +1,14 @@ +import React from 'react'; + +const Result = () => { + return ( +
+
Jump to
+
All pages
+
Favorites
+
Trash
+
+ ); +}; + +export default Result; diff --git a/packages/app/src/components/quick-search/footer.tsx b/packages/app/src/components/quick-search/footer.tsx new file mode 100644 index 0000000000..3ed233d29c --- /dev/null +++ b/packages/app/src/components/quick-search/footer.tsx @@ -0,0 +1,39 @@ +import React from 'react'; +import { StyledModalFooterContent } from './style'; + +const addIcon = ( + + + + + + + + +); + +const QuickSearchFooter = () => { + return ( + + {addIcon} 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 419fd03c21..c0c191d4eb 100644 --- a/packages/app/src/components/quick-search/index.tsx +++ b/packages/app/src/components/quick-search/index.tsx @@ -1,11 +1,41 @@ -import React from 'react'; -import { Popper } from '@/ui/popper'; +import { Modal } from '@/ui/modal'; -const QuickSearch = () => { +import { + StyledModalWrapper, + StyledContent, + StyledModalHeader, + StyledModalFooter, + StyledModalDivider, + StyledShortcut, +} from './style'; +import Input from './input'; +import Result from './content'; +import QuickSearchFooter from './footer'; +type TransitionsModalProps = { + open: boolean; + onClose: () => void; +}; +const isMac = () => { + return /macintosh|mac os x/i.test(navigator.userAgent); +}; +export const QuickSearch = ({ open, onClose }: TransitionsModalProps) => { return ( - -
QuickSearch
- + + + + + {isMac() ? '⌘+K' : 'Ctrl+K'} + + + + + + + + + + + ); }; diff --git a/packages/app/src/components/quick-search/input.tsx b/packages/app/src/components/quick-search/input.tsx new file mode 100644 index 0000000000..a452db9e7d --- /dev/null +++ b/packages/app/src/components/quick-search/input.tsx @@ -0,0 +1,34 @@ +import React from 'react'; +import { StyledInput, StyledInputContent, StyledLabel } from './style'; + +const searchIcon = ( + + + +); + +const Input = () => { + return ( + + {searchIcon} + + + ); +}; + +export default Input; diff --git a/packages/app/src/components/quick-search/style.ts b/packages/app/src/components/quick-search/style.ts new file mode 100644 index 0000000000..f201e797c1 --- /dev/null +++ b/packages/app/src/components/quick-search/style.ts @@ -0,0 +1,94 @@ +import { displayFlex, styled } from '@/styles'; +import { relative } from 'path'; + +export const StyledModalWrapper = styled('div')(({ theme }) => { + return { + width: '620px', + height: 'auto', + maxHeight: '720px', + minHeight: '350px', + backgroundColor: theme.colors.popoverBackground, + borderRadius: '20px', + position: 'absolute', + top: '138px', + margin: 'auto', + }; +}); + +export const StyledContent = styled('div')(({ theme }) => { + return { + minHeight: '215px', + maxHeight: '585px', + width: '100%', + padding: '5px 24px', + overflow: 'auto', + color: theme.colors.textColor, + marginTop: '16px', + letterSpacing: '0.06em', + }; +}); +export const StyledInputContent = styled('div')({ + margin: '13px 0', + ...displayFlex('space-between', 'center'), +}); +export const StyledShortcut = styled('div')(({ theme }) => { + return { color: theme.colors.placeHolderColor, fontSize: theme.font.sm }; +}); +export const StyledInput = styled('input')(({ theme }) => { + return { + width: '492px', + height: '22px', + padding: '0 12px', + fontSize: theme.font.sm, + ...displayFlex('space-between', 'center'), + letterSpacing: '0.06em', + color: theme.colors.textColor, + '::placeholder': { + color: theme.colors.placeHolderColor, + }, + }; +}); +export const StyledLabel = styled('label')(({ theme }) => { + return { width: '24px', height: '24px' }; +}); + +export const StyledModalHeader = styled('div')(({ theme }) => { + return { + height: '48px', + margin: '12px 24px 0px 24px', + ...displayFlex('space-between', 'center'), + color: theme.colors.textColor, + }; +}); +export const StyledModalDivider = styled('div')(({ theme }) => { + return { + width: 'auto', + height: '0', + margin: '6px 12px 6.5px 12px', + position: 'relative', + borderTop: `0.5px solid ${theme.colors.placeHolderColor}`, + }; +}); + +export const StyledModalFooter = styled('div')(({ theme }) => { + return { + fontSize: theme.font.sm, + lineHeight: '20px', + textAlign: 'center', + color: theme.colors.textColor, + margin: '16px 0', + }; +}); +export const StyledModalFooterContent = styled('div')(({ theme }) => { + return { + fontSize: theme.font.sm, + lineHeight: '20px', + textAlign: 'center', + ...displayFlex('center', 'center'), + color: theme.colors.textColor, + margin: '16px 0', + span: { + marginLeft: '12px', + }, + }; +}); diff --git a/packages/app/src/components/shortcuts-modal/index.tsx b/packages/app/src/components/shortcuts-modal/index.tsx index e665053ca4..2da577921e 100644 --- a/packages/app/src/components/shortcuts-modal/index.tsx +++ b/packages/app/src/components/shortcuts-modal/index.tsx @@ -13,7 +13,6 @@ import { windowsKeyboardShortcuts, winMarkdownShortcuts, } from '@/components/shortcuts-modal/config'; -import CloseIcon from '@mui/icons-material/Close'; import Slide from '@mui/material/Slide'; import { ModalCloseButton } from '@/ui/modal'; type ModalProps = { diff --git a/packages/app/src/components/workspace-slider-bar/index.tsx b/packages/app/src/components/workspace-slider-bar/index.tsx index 3e56c81810..cdbc1ecd99 100644 --- a/packages/app/src/components/workspace-slider-bar/index.tsx +++ b/packages/app/src/components/workspace-slider-bar/index.tsx @@ -11,14 +11,14 @@ import { Arrow } from './icons'; import { useModal } from '@/providers/global-modal-provider'; export const WorkSpaceSliderBar = () => { - const { shortcutsModalHandler } = useModal(); + const { triggerQuickSearchModal } = useModal(); const [show, setShow] = useState(false); return ( <> { - shortcutsModalHandler(true); + triggerQuickSearchModal(true); }} > Quick search diff --git a/packages/app/src/providers/global-modal-provider.tsx b/packages/app/src/providers/global-modal-provider.tsx index 1fb610dcb0..3cb8944c00 100644 --- a/packages/app/src/providers/global-modal-provider.tsx +++ b/packages/app/src/providers/global-modal-provider.tsx @@ -2,16 +2,18 @@ import { createContext, useContext, useState } from 'react'; import type { PropsWithChildren } from 'react'; import ShortcutsModal from '@/components/shortcuts-modal'; import ContactModal from '@/components/contact-modal'; - +import QuickSearch from '@/components/quick-search'; type ModalContextValue = { shortcutsModalHandler: (visible: boolean) => void; triggerContactModal: (visible: boolean) => void; + triggerQuickSearchModal: (visible: boolean) => void; }; type ModalContextProps = PropsWithChildren<{}>; export const ModalContext = createContext({ shortcutsModalHandler: () => {}, triggerContactModal: () => {}, + triggerQuickSearchModal: () => {}, }); export const useModal = () => useContext(ModalContext); @@ -21,6 +23,7 @@ export const ModalProvider = ({ }: PropsWithChildren) => { const [openContactModal, setOpenContactModal] = useState(false); const [openShortcutsModal, setOpenShortcutsModal] = useState(false); + const [openQuickSearchModal, setOpenQuickSearchModal] = useState(false); return ( { setOpenContactModal(visible); }, + triggerQuickSearchModal: visible => { + setOpenQuickSearchModal(visible); + }, }} > + { + setOpenQuickSearchModal(false); + }} + > {children} );