Format & Lint

components/LinkViews/Layouts/MasonryView.tsx

@@ -1,40 +1,43 @@
-
 import LinkCard from "@/components/LinkViews/LinkCard";
 import { LinkIncludingShortenedCollectionAndTags } from "@/types/global";
 import { GridLoader } from "react-spinners";
-import Masonry from 'react-masonry-css'
+import Masonry from "react-masonry-css";
 
 export default function MasonryView({
-	links,
-	editMode,
-	isLoading,
+  links,
+  editMode,
+  isLoading,
 }: {
-	links: LinkIncludingShortenedCollectionAndTags[];
-	editMode?: boolean;
-	isLoading?: boolean;
+  links: LinkIncludingShortenedCollectionAndTags[];
+  editMode?: boolean;
+  isLoading?: boolean;
 }) {
-	return (
-		<Masonry breakpointCols={4} columnClassName="!w-full flex flex-col gap-5" className="grid min-[1900px]:grid-cols-4 xl:grid-cols-3 sm:grid-cols-2 grid-cols-1 gap-5">
-			{links.map((e, i) => {
-				return (
-					<LinkCard
-						key={i}
-						link={e}
-						count={i}
-						flipDropdown={i === links.length - 1}
-						editMode={editMode}
-					/>
-				);
-			})}
+  return (
+    <Masonry
+      breakpointCols={4}
+      columnClassName="!w-full flex flex-col gap-5"
+      className="grid min-[1900px]:grid-cols-4 xl:grid-cols-3 sm:grid-cols-2 grid-cols-1 gap-5"
+    >
+      {links.map((e, i) => {
+        return (
+          <LinkCard
+            key={i}
+            link={e}
+            count={i}
+            flipDropdown={i === links.length - 1}
+            editMode={editMode}
+          />
+        );
+      })}
 
-			{isLoading && links.length > 0 && (
-				<GridLoader
-					color="oklch(var(--p))"
-					loading={true}
-					size={20}
-					className="fixed top-5 right-5 opacity-50 z-30"
-				/>
-			)}
-		</Masonry>
-	);
+      {isLoading && links.length > 0 && (
+        <GridLoader
+          color="oklch(var(--p))"
+          loading={true}
+          size={20}
+          className="fixed top-5 right-5 opacity-50 z-30"
+        />
+      )}
+    </Masonry>
+  );
 }

components/LinkViews/LinkCard.tsx

@@ -122,8 +122,8 @@ export default function LinkCard({ link, flipDropdown, editMode }: Props) {
           ? handleCheckboxClick(link)
           : editMode
             ? toast.error(
-              "You don't have permission to edit or delete this item."
-            )
+                "You don't have permission to edit or delete this item."
+              )
             : undefined
       }
     >
@@ -133,7 +133,7 @@ export default function LinkCard({ link, flipDropdown, editMode }: Props) {
           !editMode && window.open(generateLinkHref(link, account), "_blank")
         }
       >
-        {viewMode === 'masonry' && !(previewAvailable(link)) ? null : (
+        {viewMode === "masonry" && !previewAvailable(link) ? null : (
           <>
             <div className="relative rounded-t-2xl h-40 overflow-hidden">
               {previewAvailable(link) ? (
@@ -234,7 +234,11 @@ export default function LinkCard({ link, flipDropdown, editMode }: Props) {
       <LinkActions
         link={link}
         collection={collection}
-        position={!(previewAvailable(link)) && viewMode === 'masonry' ? "top-[.75rem] right-3" : "top-[10.75rem] right-3"}
+        position={
+          !previewAvailable(link) && viewMode === "masonry"
+            ? "top-[.75rem] right-3"
+            : "top-[10.75rem] right-3"
+        }
         toggleShowInfo={() => setShowInfo(!showInfo)}
         linkInfo={showInfo}
         flipDropdown={flipDropdown}

components/ViewDropdown.tsx

@@ -26,30 +26,33 @@ export default function ViewDropdown({ viewMode, setViewMode }: Props) {
     <div className="p-1 flex flex-row gap-1 border border-neutral-content rounded-[0.625rem]">
       <button
         onClick={(e) => onChangeViewMode(e, ViewMode.Card)}
-        className={`btn btn-square btn-sm btn-ghost ${viewMode == ViewMode.Card
-          ? "bg-primary/20 hover:bg-primary/20"
-          : "hover:bg-neutral/20"
-          }`}
+        className={`btn btn-square btn-sm btn-ghost ${
+          viewMode == ViewMode.Card
+            ? "bg-primary/20 hover:bg-primary/20"
+            : "hover:bg-neutral/20"
+        }`}
       >
         <i className="bi-grid w-4 h-4 text-neutral"></i>
       </button>
 
       <button
         onClick={(e) => onChangeViewMode(e, ViewMode.Masonry)}
-        className={`btn btn-square btn-sm btn-ghost ${viewMode == ViewMode.Masonry
-          ? "bg-primary/20 hover:bg-primary/20"
-          : "hover:bg-neutral/20"
-          }`}
+        className={`btn btn-square btn-sm btn-ghost ${
+          viewMode == ViewMode.Masonry
+            ? "bg-primary/20 hover:bg-primary/20"
+            : "hover:bg-neutral/20"
+        }`}
       >
         <i className="bi bi-columns-gap w-4 h-4 text-neutral"></i>
       </button>
 
       <button
         onClick={(e) => onChangeViewMode(e, ViewMode.List)}
-        className={`btn btn-square btn-sm btn-ghost ${viewMode == ViewMode.List
-          ? "bg-primary/20 hover:bg-primary/20"
-          : "hover:bg-neutral/20"
-          }`}
+        className={`btn btn-square btn-sm btn-ghost ${
+          viewMode == ViewMode.List
+            ? "bg-primary/20 hover:bg-primary/20"
+            : "hover:bg-neutral/20"
+        }`}
       >
         <i className="bi bi-view-stacked w-4 h-4 text-neutral"></i>
       </button>