Resolved some bugs in DND and added complete functionality to collection

components/utils/BookMarkItem.js

@@ -120,7 +120,7 @@ const BookMarkItem = ({ data, bookmarks, fetchBookmarks, animated, interactive }
 
  return (
  <div
- className={`cursor-pointer flex justify-start items-center flex-col p-5 px-4 rounded-md duration-500 white-light-shadow bg-white w-[340px] border border-[#ddd] hover:border-[#3d5eff98] item-hover-text parent-for-image-scale h-[325px] parent-for-image-scale dark:border-[#555] dark:bg-[#1F1F1F] dark:text-white ${interactive ? "pointer-events-auto" : "pointer-events-none"}`}
+ className={`whitespace-normal cursor-pointer flex justify-start items-center flex-col p-5 px-4 rounded-md duration-500 white-light-shadow bg-white w-[340px] border border-[#ddd] hover:border-[#3d5eff98] item-hover-text parent-for-image-scale h-[325px] parent-for-image-scale dark:border-[#555] dark:bg-[#1F1F1F] dark:text-white ${interactive ? "pointer-events-auto" : "pointer-events-none"}`}
  onClick={goToCheatSheetPage}
  data-aos={animated ? "fade-left" : "none"}
  >
@@ -166,7 +166,7 @@ const BookMarkItem = ({ data, bookmarks, fetchBookmarks, animated, interactive }
  >
  {url.hostname && url.hostname}
  </a>
- <a href={website_url} target="_blank">
+ <a href={website_url} target="_blank" className="font-bold text-lg duration-500 hover:text-[#3d5eff]">
  <h1 className="font-bold text-lg duration-500 hover:text-[#3d5eff]">
  {cheatsheet_name.length > 50
  ? cheatsheet_name.slice(0, 50) + "..."

pages/collections/dnd-components/bookmarks.js

@@ -4,14 +4,24 @@ import {Droppable, Draggable} from "react-beautiful-dnd";
 
 import {BookMarkItem} from "../../../components";
 
+import {FiPlus, FiTrash2} from "react-icons/fi";
+import {MdApps} from "react-icons/md";
+
 export default function BookmarksItem({collectionId, bookmarkData, bookmarkIDs, entities, setEntities, bookmarks, fetchBookmarks}) {
- console.log(bookmarkData, bookmarkIDs)
+ const deleteBookmark = (index, collectionIndex) => {
+ let collections = entities.collections;
+ let bookmarks = entities.bookmarks;
+ bookmarks.splice(index, 1);
+ collections[collectionId].bookmarkIDs.splice(collectionIndex, 1);
+ setEntities({ ...entities, collections, bookmarks });
+ }
+
  return (
  <Droppable droppableId={collectionId} type="bookmark" direction="horizontal">
  {
  provided => (
  <div
- className="overflow-x-auto overflow-y-hidden whitespace-nowrap w-full h-full"
+ className="overflow-x-auto overflow-y-hidden w-full min-h-[355px] whitespace-nowrap flex"
  {...provided.droppableProps}
  ref={provided.innerRef}
  >
@@ -24,7 +34,13 @@ export default function BookmarksItem({collectionId, bookmarkData, bookmarkIDs,
  {
  provided => (
  <div className="inline-block mt-4 mr-4" {...provided.draggableProps} style={provided.draggableProps.style} ref={provided.innerRef}>
- <div className="dark:bg-[#ffffff20] border-b-[1px] border-[#eeeeee30] pl-[30px] rounded-xl w-[370px] h-[325px]" {...provided.dragHandleProps}>
+ <div className="w-[340px] min-h-[355px]">
+ <div className="rounded-t-lg dark:bg-[#ffffff20] w-min p-2 flex justify-start items-center mb-[-4px]">
+ <div {...provided.dragHandleProps}>
+ <MdApps className="mx-2 text-white text-xl" />
+ </div>
+ <FiTrash2 className="mx-2 text-white text-lg cursor-pointer" onClick={() => deleteBookmark(contentIndex, index)} />
+ </div>
  <BookMarkItem
  data={content}
  bookmarks={bookmarks}

pages/collections/dnd-components/collection.js

@@ -38,7 +38,7 @@ export default function Collection({entities, setEntities, collectionId, index,
  <div className="h-full w-full p-4">
  <div className="flex items-center justify-between">
  <div className="" {...provided.dragHandleProps}>
- <MdApps className="mb-1 mr-2 text-white text-xl" style={{transform: 'rotate(90deg)'}} />
+ <MdApps className="mb-1 mr-2 text-white text-xl" />
  </div>
  <input spellCheck={false} value={collectionTitle} onChange={(e) => setCollectionTitle(e.target.value)} className="text-2xl w-full font-bold text-[#fff] bg-transparent cursor-text" />
  <div className="flex items-center justify-between">

pages/collections/index.js

@@ -30,7 +30,7 @@ export default function Collections(props) {
  </Head>
  <Header {...props} />
  <SvgBanner
- text="Your Collections"
+ text={`Your Collections (${entities ? entities.collectionOrder.length : 0})`}
  description="These are the collections of your bookmarked cheatsheets, you can move stuff around by dragging and dropping them 🤟"
  image_url="/assets/3d/bookmarks.png"
  dark={darkMode}