diff --git a/src/components/ButtonLink.tsx b/src/components/ButtonLink.tsx index b9e5091..475b99c 100644 --- a/src/components/ButtonLink.tsx +++ b/src/components/ButtonLink.tsx @@ -6,18 +6,22 @@ export default function ButtonLink({ onClick, children, style = {}, + className = "", }: { href?: string; onClick?: (...args: any) => any; children: ReactNode; style?: CSSProperties; + className?: string; }) { const handleClick = (event) => { - event.preventDefault(); + if (!href || href === "#") { + event.preventDefault(); + } onClick && onClick(); }; return ( - + {children} ); diff --git a/src/components/Links/Links.tsx b/src/components/Links/Links.tsx index 1466955..86d9529 100644 --- a/src/components/Links/Links.tsx +++ b/src/components/Links/Links.tsx @@ -9,6 +9,7 @@ import LinkItem from "./LinkItem"; import ButtonLink from "components/ButtonLink"; import CreateItem from "components/QuickActions/CreateItem"; +import QuickActionSearch from "components/QuickActions/Search"; import { RxHamburgerMenu } from "react-icons/rx"; import styles from "./links.module.scss"; @@ -17,11 +18,13 @@ export default function Links({ toggleFavorite, isMobile, openMobileModal, + openSearchModal, }: { category: Category; toggleFavorite: (linkId: Link["id"]) => void; isMobile: boolean; openMobileModal: () => void; + openSearchModal: () => void; }) { if (category === null) { return ( @@ -56,6 +59,7 @@ export default function Links({ )} + diff --git a/src/components/Modal/modal.module.scss b/src/components/Modal/modal.module.scss index e4909b8..fa1ef27 100644 --- a/src/components/Modal/modal.module.scss +++ b/src/components/Modal/modal.module.scss @@ -48,10 +48,12 @@ flex: 1; align-items: center; flex-direction: column; + overflow: auto; } @media (max-width: 768px) { .modal-container { + height: calc(100% - 2em); width: calc(100% - 2em); min-width: unset; margin-top: 1em; diff --git a/src/components/QuickActions/CreateItem.tsx b/src/components/QuickActions/CreateItem.tsx index a78a039..657eb73 100644 --- a/src/components/QuickActions/CreateItem.tsx +++ b/src/components/QuickActions/CreateItem.tsx @@ -1,5 +1,5 @@ import LinkTag from "next/link"; -import { GrAdd } from "react-icons/gr"; +import { IoAddOutline } from "react-icons/io5"; import { Category } from "types"; @@ -11,7 +11,7 @@ export default function CreateItem({ onClick, }: { type: "category" | "link"; - categoryId: Category["id"]; + categoryId?: Category["id"]; onClick?: (event: any) => void; // FIXME: find good event type }) { return ( @@ -21,7 +21,7 @@ export default function CreateItem({ className={styles["action"]} onClick={onClick && onClick} > - + ); } diff --git a/src/components/QuickActions/Search.tsx b/src/components/QuickActions/Search.tsx new file mode 100644 index 0000000..f741c2f --- /dev/null +++ b/src/components/QuickActions/Search.tsx @@ -0,0 +1,16 @@ +import ButtonLink from "components/ButtonLink"; +import { BsSearch } from "react-icons/bs"; + +import styles from "./quickactions.module.scss"; + +export default function QuickActionSearch({ + openSearchModal, +}: { + openSearchModal: () => void; +}) { + return ( + + + + ); +} diff --git a/src/components/SearchModal/SearchModal.tsx b/src/components/SearchModal/SearchModal.tsx index 045f2cd..1e13d7f 100644 --- a/src/components/SearchModal/SearchModal.tsx +++ b/src/components/SearchModal/SearchModal.tsx @@ -19,11 +19,13 @@ export default function SearchModal({ handleSelectCategory, categories, items, + noHeader = true, }: { close: () => void; handleSelectCategory: (category: Category) => void; categories: Category[]; items: SearchItem[]; + noHeader?: boolean; }) { const autoFocusRef = useAutoFocus(); @@ -98,7 +100,7 @@ export default function SearchModal({ ); return ( - +