Display checkbox on card & reset when collection is changed

components/LinkViews/LinkCard.tsx

@@ -24,13 +24,17 @@ type Props = {
   flipDropdown?: boolean;
 };
 
-export default function LinkGrid({
+export default function LinkCard({
   link,
   flipDropdown,
 }: Props) {
   const { collections } = useCollectionStore();
 
-  const { links, getLink } = useLinkStore();
+  const { links, getLink, setSelectedLinks, selectedLinks } = useLinkStore();
+
+  const handleCheckboxClick = (checkboxId: number) => {
+    setSelectedLinks((selectedLinks.includes(checkboxId) ? selectedLinks.filter((id) => id !== checkboxId) : [...selectedLinks, checkboxId]));
+  };
 
   let shortendURL;
 
@@ -85,6 +89,12 @@ export default function LinkGrid({
       ref={ref}
       className="border border-solid border-neutral-content bg-base-200 shadow-md hover:shadow-none duration-100 rounded-2xl relative"
     >
+      <input
+        type="checkbox"
+        className="checkbox checkbox-primary my-auto ml-3 mt-3 fixed z-50 bg-white"
+        checked={selectedLinks.includes(link.id)}
+        onChange={() => handleCheckboxClick(link.id)}
+      />
       <Link
         href={generateLinkHref(link)}
         target="_blank"