all

Securite/Linkwarden/components/LinkViews/Layouts/CardView.tsx

@@ -0,0 +1,39 @@
+import LinkCard from "@/components/LinkViews/LinkCard";
+import { LinkIncludingShortenedCollectionAndTags } from "@/types/global";
+import { link } from "fs";
+import { GridLoader } from "react-spinners";
+
+export default function CardView({
+  links,
+  editMode,
+  isLoading,
+}: {
+  links: LinkIncludingShortenedCollectionAndTags[];
+  editMode?: boolean;
+  isLoading?: boolean;
+}) {
+  return (
+    <div 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"
+        />
+      )}
+    </div>
+  );
+}

Securite/Linkwarden/components/LinkViews/Layouts/GridView.tsx

@@ -0,0 +1,16 @@
+import LinkGrid from "@/components/LinkViews/LinkGrid";
+import { LinkIncludingShortenedCollectionAndTags } from "@/types/global";
+
+export default function GridView({
+  links,
+}: {
+  links: LinkIncludingShortenedCollectionAndTags[];
+}) {
+  return (
+    <div className="grid 2xl:grid-cols-3 xl:grid-cols-2 grid-cols-1 gap-5">
+      {links.map((e, i) => {
+        return <LinkGrid link={e} count={i} key={i} />;
+      })}
+    </div>
+  );
+}

Securite/Linkwarden/components/LinkViews/Layouts/ListView.tsx

@@ -0,0 +1,38 @@
+import LinkList from "@/components/LinkViews/LinkList";
+import { LinkIncludingShortenedCollectionAndTags } from "@/types/global";
+import { GridLoader } from "react-spinners";
+
+export default function ListView({
+  links,
+  editMode,
+  isLoading,
+}: {
+  links: LinkIncludingShortenedCollectionAndTags[];
+  editMode?: boolean;
+  isLoading?: boolean;
+}) {
+  return (
+    <div className="flex gap-1 flex-col">
+      {links.map((e, i) => {
+        return (
+          <LinkList
+            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"
+        />
+      )}
+    </div>
+  );
+}