improvements

2023-12-21 10:55:07 -05:00
parent 1511ee1def
commit e9b47a69c5
12 changed files with 144 additions and 151 deletions
@@ -7,13 +7,9 @@ export default function GridView({
  links: LinkIncludingShortenedCollectionAndTags[];
 }) {
  return (
-    <div className="columns-1 xl:columns-2 2xl:columns-3 gap-5">
+    <div className="grid 2xl:grid-cols-3 xl:grid-cols-2 grid-cols-1 gap-5">
      {links.map((e, i) => {
-        return (
-          <div key={i} className="break-inside-avoid mb-5">
-            <LinkGrid link={e} count={i} />
-          </div>
-        );
+        return <LinkGrid link={e} count={i} key={i} />;
      })}
    </div>
  );
@@ -2,15 +2,15 @@ import {
  CollectionIncludingMembersAndLinkCount,
  LinkIncludingShortenedCollectionAndTags,
 } from "@/types/global";
-import React, { useEffect, useState } from "react";
+import { useEffect, useState } from "react";
 import useLinkStore from "@/store/links";
 import useCollectionStore from "@/store/collections";
-import isValidUrl from "@/lib/shared/isValidUrl";
 import unescapeString from "@/lib/client/unescapeString";
 import LinkActions from "@/components/LinkViews/LinkComponents/LinkActions";
 import LinkDate from "@/components/LinkViews/LinkComponents/LinkDate";
 import LinkCollection from "@/components/LinkViews/LinkComponents/LinkCollection";
 import LinkIcon from "@/components/LinkViews/LinkComponents/LinkIcon";
+import Link from "next/link";

 type Props = {
  link: LinkIncludingShortenedCollectionAndTags;
@@ -18,10 +18,18 @@ type Props = {
  className?: string;
 };

-export default function LinkCard({ link, count, className }: Props) {
+export default function LinkGrid({ link, count, className }: Props) {
+  const { collections } = useCollectionStore();
+
  const { links } = useLinkStore();

-  const { collections } = useCollectionStore();
+  let shortendURL;
+
+  try {
+    shortendURL = new URL(link.url || "").host.toLowerCase();
+  } catch (error) {
+    console.log(error);
+  }

  const [collection, setCollection] =
    useState<CollectionIncludingMembersAndLinkCount>(
@@ -38,53 +46,61 @@ export default function LinkCard({ link, count, className }: Props) {
    );
  }, [collections, links]);

-  let shortendURL;
-
-  try {
-    shortendURL = new URL(link.url || "").host.toLowerCase();
-  } catch (error) {
-    console.log(error);
-  }
-
-  const url =
-    isValidUrl(link.url || "") && link.url ? new URL(link.url) : undefined;
-
  return (
-    <div
-      className={`h-fit hover:bg-base-300 hover:border-base-300 border border-solid border-neutral-content bg-base-200 shadow-md hover:shadow-none duration-200 rounded-2xl relative ${
-        className || ""
-      }`}
-    >
+    <div className="border border-solid border-neutral-content bg-base-200 shadow-md hover:shadow-none duration-100 rounded-2xl relative p-3">
      <div
        onClick={() => link.url && window.open(link.url || "", "_blank")}
-        className="flex flex-col justify-between cursor-pointer h-full w-full gap-1 p-3"
+        className="cursor-pointer"
      >
-        <div className="absolute bottom-3 right-3">
-          <LinkIcon link={link}/>
-        </div>
+        <LinkIcon link={link} width="w-12 mb-3" />
+        <p className="truncate w-full">
+          {unescapeString(link.name || link.description) || link.url}
+        </p>

-        <div className="flex items-baseline gap-1">
-          <p className="text-sm text-neutral">{count + 1}</p>
-          <p className="text-lg truncate w-full pr-8">
-            {unescapeString(link.name || link.description) || link.url}
-          </p>
-        </div>
-
-        {link.url ? (
-          <div className="flex items-center gap-1 max-w-full w-fit text-neutral">
-            <i className="bi-link-45deg"/>
-            <p className="truncate w-full">{shortendURL}</p>
+        <div className="mt-1 flex flex-col text-xs text-neutral">
+          <div className="flex items-center gap-2">
+            <LinkCollection link={link} collection={collection} />
+            &middot;
+            {link.url ? (
+              <div
+                onClick={(e) => {
+                  e.preventDefault();
+                  window.open(link.url || "", "_blank");
+                }}
+                className="flex items-center hover:opacity-60 cursor-pointer duration-100"
+              >
+                <p className="truncate">{shortendURL}</p>
+              </div>
+            ) : (
+              <div className="badge badge-primary badge-sm my-1">
+                {link.type}
+              </div>
+            )}
          </div>
-        ) : (
-          <div className="badge badge-primary badge-sm my-1">{link.type}</div>
-        )}
-
-        <LinkCollection link={link} collection={collection}/>
-
-        <LinkDate link={link}/>
+          <LinkDate link={link} />
+        </div>
+        {/* <p className="truncate">{unescapeString(link.description)}</p>
+        {link.tags[0] ? (
+          <div className="flex gap-3 items-center flex-wrap mt-2 truncate relative">
+            <div className="flex gap-1 items-center flex-wrap">
+              {link.tags.map((e, i) => (
+                <Link
+                  href={"/tags/" + e.id}
+                  key={i}
+                  onClick={(e) => {
+                    e.stopPropagation();
+                  }}
+                  className="btn btn-xs btn-ghost truncate max-w-[19rem]"
+                >
+                  #{e.name}
+                </Link>
+              ))}
+            </div>
+          </div>
+        ) : undefined} */}
      </div>

-      <LinkActions link={link} collection={collection}/>
+      <LinkActions link={link} collection={collection} />
    </div>
  );
 }
@@ -55,7 +55,7 @@ export default function LinkActions({ link, collection, position }: Props) {
  };

  return (
-    <div>
+    <>
      <div
        className={`dropdown dropdown-left absolute ${
          position || "top-3 right-3"
@@ -66,11 +66,7 @@ export default function LinkActions({ link, collection, position }: Props) {
          role="button"
          className="btn btn-ghost btn-sm btn-square text-neutral"
        >
-          <i
-            id={"expand-dropdown" + collection.id}
-            title="More"
-            className="bi-three-dots text-xl"
-          />
+          <i title="More" className="bi-three-dots text-xl" />
        </div>
        <ul className="dropdown-content z-[20] menu shadow bg-base-200 border border-neutral-content rounded-box w-44 mr-1">
          {permissions === true ? (
@@ -154,6 +150,6 @@ export default function LinkActions({ link, collection, position }: Props) {
      {/* {expandedLink ? (
                <ExpandedLink onClose={() => setExpandedLink(false)} link={link} />
              ) : undefined} */}
-    </div>
+    </>
  );
 }
@@ -3,7 +3,10 @@ import Image from "next/image";
 import isValidUrl from "@/lib/shared/isValidUrl";
 import React from "react";

-export default function LinkIcon({ link, width }: {
+export default function LinkIcon({
+  link,
+  width,
+}: {
  link: LinkIncludingShortenedCollectionAndTags;
  width?: string;
 }) {
@@ -47,63 +47,57 @@ export default function LinkGrid({ link, count, className }: Props) {
  }, [collections, links]);

  return (
-    <div className="w-full border border-solid border-neutral-content bg-base-200 shadow-md hover:shadow-none duration-100 rounded-2xl relative">
+    <div className="border border-solid border-neutral-content bg-base-200 shadow-md hover:shadow-none duration-100 rounded-2xl relative p-3">
      <div
        onClick={() => link.url && window.open(link.url || "", "_blank")}
-        className="flex items-center cursor-pointer p-3"
+        className="cursor-pointer"
      >
-        <div className="shrink-0">
-          <LinkIcon link={link} width="w-12" />
-        </div>
+        <LinkIcon link={link} width="w-12 mb-3" />
+        <p className="truncate w-full">
+          {unescapeString(link.name || link.description) || link.url}
+        </p>

-        <div className="w-[calc(100%-56px)] ml-2">
-          <p className="line-clamp-1 mr-8">
-            {unescapeString(link.name || link.description) || link.url}
-          </p>
-
-          <div className="mt-1 flex flex-col sm:flex-row sm:items-center gap-2 text-xs text-neutral">
-            <div className="flex items-center gap-2">
-              <LinkCollection link={link} collection={collection} />
-              &middot;
-              {link.url ? (
-                <div
-                  onClick={(e) => {
-                    e.preventDefault();
-                    window.open(link.url || "", "_blank");
-                  }}
-                  className="flex items-center hover:opacity-60 cursor-pointer duration-100"
-                >
-                  <p className="truncate w-full">{shortendURL}</p>
-                </div>
-              ) : (
-                <div className="badge badge-primary badge-sm my-1">
-                  {link.type}
-                </div>
-              )}
-            </div>
-            <span className="hidden sm:block">&middot;</span>
-            <LinkDate link={link} />
-          </div>
-          <p>{unescapeString(link.description)}</p>
-          {link.tags[0] ? (
-            <div className="flex gap-3 items-center flex-wrap mt-2 truncate relative">
-              <div className="flex gap-1 items-center flex-wrap">
-                {link.tags.map((e, i) => (
-                  <Link
-                    href={"/tags/" + e.id}
-                    key={i}
-                    onClick={(e) => {
-                      e.stopPropagation();
-                    }}
-                    className="btn btn-xs btn-ghost truncate max-w-[19rem]"
-                  >
-                    #{e.name}
-                  </Link>
-                ))}
+        <div className="mt-1 flex flex-col text-xs text-neutral">
+          <div className="flex items-center gap-2">
+            <LinkCollection link={link} collection={collection} />
+            &middot;
+            {link.url ? (
+              <div
+                onClick={(e) => {
+                  e.preventDefault();
+                  window.open(link.url || "", "_blank");
+                }}
+                className="flex items-center hover:opacity-60 cursor-pointer duration-100"
+              >
+                <p className="truncate">{shortendURL}</p>
              </div>
-            </div>
-          ) : undefined}
+            ) : (
+              <div className="badge badge-primary badge-sm my-1">
+                {link.type}
+              </div>
+            )}
+          </div>
+          <LinkDate link={link} />
        </div>
+        <p className="truncate">{unescapeString(link.description)}</p>
+        {link.tags[0] ? (
+          <div className="flex gap-3 items-center flex-wrap mt-2 truncate relative">
+            <div className="flex gap-1 items-center flex-wrap">
+              {link.tags.map((e, i) => (
+                <Link
+                  href={"/tags/" + e.id}
+                  key={i}
+                  onClick={(e) => {
+                    e.stopPropagation();
+                  }}
+                  className="btn btn-xs btn-ghost truncate max-w-[19rem]"
+                >
+                  #{e.name}
+                </Link>
+              ))}
+            </div>
+          </div>
+        ) : undefined}
      </div>

      <LinkActions link={link} collection={collection} />