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 (
-
+