diff --git a/src/components/Links/LinkItem.tsx b/src/components/Links/LinkItem.tsx
index 269dd7d..e9dc0cb 100644
--- a/src/components/Links/LinkItem.tsx
+++ b/src/components/Links/LinkItem.tsx
@@ -1,52 +1,31 @@
import LinkTag from "next/link";
-import { useState } from "react";
-import {
- AiFillDelete,
- AiFillEdit,
- AiFillStar,
- AiOutlineStar,
-} from "react-icons/ai";
+import { AiFillStar } from "react-icons/ai";
import { Link } from "types";
+
+import EditItem from "components/QuickActions/EditItem";
+import FavoriteItem from "components/QuickActions/FavoriteItem";
+import RemoveItem from "components/QuickActions/RemoveItem";
import LinkFavicon from "./LinkFavicon";
import styles from "./links.module.scss";
export default function LinkItem({ link }: { link: Link }) {
const { id, name, url, favorite } = link;
- const [isFavorite, setFavorite] = useState(favorite);
return (
- {name} {isFavorite && }
+ {name} {favorite && }
-
setFavorite((v) => !v)} className={styles["edit"]}>
- {isFavorite ? (
-
- ) : (
-
- )}
-
-
-
-
-
-
-
+
+
+
);
diff --git a/src/components/Links/Links.tsx b/src/components/Links/Links.tsx
index c0926db..d6d34d6 100644
--- a/src/components/Links/Links.tsx
+++ b/src/components/Links/Links.tsx
@@ -1,6 +1,9 @@
import LinkTag from "next/link";
import { Category } from "types";
+
+import EditItem from "components/QuickActions/EditItem";
+import RemoveItem from "components/QuickActions/RemoveItem";
import LinkItem from "./LinkItem";
import styles from "./links.module.scss";
@@ -15,25 +18,29 @@ export default function Links({ category }: { category: Category }) {
);
}
- const { name, links } = category;
+ const { id, name, links } = category;
if (links.length === 0) {
return (
- Aucun lien pour {category.name}
+ Aucun lien pour {name}
-
- Créer un lien
-
+
Créer un lien
);
}
return (
-
- {name}
- — {links.length}
+
+
+ {name}
+ — {links.length}
+
+
+
+
+
{links.map((link, key) => (
diff --git a/src/components/Links/links.module.scss b/src/components/Links/links.module.scss
index 99573d2..6b5b978 100644
--- a/src/components/Links/links.module.scss
+++ b/src/components/Links/links.module.scss
@@ -17,8 +17,6 @@
display: flex;
flex: 1;
flex-direction: column;
- overflow-x: hidden;
- overflow-y: scroll;
& h2 {
color: $blue;
@@ -33,12 +31,29 @@
}
}
+.category-header {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+
+ & .category-controls {
+ display: flex;
+ gap: 0.5em;
+ align-items: center;
+ }
+}
+
.links {
+ height: 100%;
width: 100%;
display: flex;
flex: 1;
+ gap: 0.5em;
+ padding: 3px;
flex-direction: column;
animation: fadein 0.3s both; // bug on drag start
+ overflow-x: hidden;
+ overflow-y: scroll;
}
.link {
@@ -48,10 +63,9 @@
width: 100%;
color: $blue;
background-color: $white;
- padding: 10px 15px;
+ padding: 0.75em 1em;
border: 1px solid $lightest-grey;
border-radius: 3px;
- margin-bottom: 10px;
outline: 3px solid transparent;
display: flex;
align-items: center;
diff --git a/src/components/QuickActions/CreateItem.tsx b/src/components/QuickActions/CreateItem.tsx
new file mode 100644
index 0000000..a78a039
--- /dev/null
+++ b/src/components/QuickActions/CreateItem.tsx
@@ -0,0 +1,27 @@
+import LinkTag from "next/link";
+import { GrAdd } from "react-icons/gr";
+
+import { Category } from "types";
+
+import styles from "./quickactions.module.scss";
+
+export default function CreateItem({
+ type,
+ categoryId,
+ onClick,
+}: {
+ type: "category" | "link";
+ categoryId: Category["id"];
+ onClick?: (event: any) => void; // FIXME: find good event type
+}) {
+ return (
+
+
+
+ );
+}
diff --git a/src/components/QuickActions/EditItem.tsx b/src/components/QuickActions/EditItem.tsx
new file mode 100644
index 0000000..bde81a7
--- /dev/null
+++ b/src/components/QuickActions/EditItem.tsx
@@ -0,0 +1,27 @@
+import LinkTag from "next/link";
+import { AiOutlineEdit } from "react-icons/ai";
+
+import { Category, Link } from "types";
+
+import styles from "./quickactions.module.scss";
+
+export default function EditItem({
+ type,
+ id,
+ onClick,
+}: {
+ type: "category" | "link";
+ id: Link["id"] | Category["id"];
+ onClick?: (event: any) => void; // FIXME: find good event type
+}) {
+ return (
+
+
+
+ );
+}
diff --git a/src/components/QuickActions/FavoriteItem.tsx b/src/components/QuickActions/FavoriteItem.tsx
new file mode 100644
index 0000000..0350697
--- /dev/null
+++ b/src/components/QuickActions/FavoriteItem.tsx
@@ -0,0 +1,31 @@
+import { ReactNode, useState } from "react";
+import { AiFillStar, AiOutlineStar } from "react-icons/ai";
+
+export default function FavoriteItem({
+ isFavorite,
+ children,
+ onClick,
+}: {
+ isFavorite: boolean;
+ children?: ReactNode;
+ onClick?: (event: any) => void; // FIXME: find good event type
+}) {
+ const starColor = "#ffc107";
+ const [isItemFavorite, setFavorite] = useState(isFavorite);
+
+ const handleClick = (event) => {
+ onClick && onClick(event);
+ setFavorite((v) => !v);
+ };
+
+ return (
+
+ {isItemFavorite ? (
+
+ ) : (
+
+ )}
+ {children && <>{children}>}
+
+ );
+}
diff --git a/src/components/QuickActions/RemoveItem.tsx b/src/components/QuickActions/RemoveItem.tsx
new file mode 100644
index 0000000..960d7dc
--- /dev/null
+++ b/src/components/QuickActions/RemoveItem.tsx
@@ -0,0 +1,27 @@
+import LinkTag from "next/link";
+import { CgTrashEmpty } from "react-icons/cg";
+
+import { Category, Link } from "types";
+
+import styles from "./quickactions.module.scss";
+
+export default function RemoveItem({
+ type,
+ id,
+ onClick,
+}: {
+ type: "category" | "link";
+ id: Link["id"] | Category["id"];
+ onClick?: (event: any) => void; // FIXME: find good event type
+}) {
+ return (
+
+
+
+ );
+}
diff --git a/src/components/QuickActions/quickactions.module.scss b/src/components/QuickActions/quickactions.module.scss
new file mode 100644
index 0000000..16c4dbe
--- /dev/null
+++ b/src/components/QuickActions/quickactions.module.scss
@@ -0,0 +1,18 @@
+.action {
+ border: 0 !important;
+ margin: 0 !important;
+ padding: 0 !important;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+
+ & svg {
+ height: 20px;
+ width: 20px;
+ transition: 0.15s;
+ }
+
+ &:hover svg {
+ transform: scale(1.25);
+ }
+}
diff --git a/src/components/SideMenu/Categories/CategoryItem.tsx b/src/components/SideMenu/Categories/CategoryItem.tsx
index 07956f7..9cafb01 100644
--- a/src/components/SideMenu/Categories/CategoryItem.tsx
+++ b/src/components/SideMenu/Categories/CategoryItem.tsx
@@ -1,9 +1,10 @@
-import LinkTag from "next/link";
import { useEffect, useRef } from "react";
-import { AiFillDelete, AiFillEdit } from "react-icons/ai";
import { Category } from "types";
+import EditItem from "components/QuickActions/EditItem";
+import RemoveItem from "components/QuickActions/RemoveItem";
+
import styles from "./categories.module.scss";
interface CategoryItemProps {
@@ -45,20 +46,12 @@ export default function CategoryItem({
function MenuOptions({ id }: { id: number }): JSX.Element {
return (
-
event.stopPropagation()}
- >
-
-
-
event.stopPropagation()}
- >
-
-
+ />
+
);
}