improvements

2023-12-16 15:06:26 -05:00
parent 1955cca589
commit f5e7e373a8
17 changed files with 167 additions and 168 deletions
@@ -0,0 +1,92 @@
+import {
+  CollectionIncludingMembersAndLinkCount,
+  LinkIncludingShortenedCollectionAndTags,
+} from "@/types/global";
+import { faLink } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+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";
+
+type Props = {
+  link: LinkIncludingShortenedCollectionAndTags;
+  count: number;
+  className?: string;
+};
+
+export default function LinkCard({ link, count, className }: Props) {
+  const { links } = useLinkStore();
+
+  const { collections } = useCollectionStore();
+
+  const [collection, setCollection] =
+    useState<CollectionIncludingMembersAndLinkCount>(
+      collections.find(
+        (e) => e.id === link.collection.id
+      ) as CollectionIncludingMembersAndLinkCount
+    );
+
+  useEffect(() => {
+    setCollection(
+      collections.find(
+        (e) => e.id === link.collection.id
+      ) as CollectionIncludingMembersAndLinkCount
+    );
+  }, [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
+        onClick={() => link.url && window.open(link.url || "", "_blank")}
+        className="flex flex-col justify-between cursor-pointer h-full w-full gap-1 p-3"
+      >
+        <div className="absolute bottom-3 right-3">
+          <LinkIcon link={link} />
+        </div>
+
+        <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">
+            <FontAwesomeIcon icon={faLink} className="mt-1 w-4 h-4" />
+            <p className="truncate w-full">{shortendURL}</p>
+          </div>
+        ) : (
+          <div className="badge badge-primary badge-sm my-1">{link.type}</div>
+        )}
+
+        <LinkCollection link={link} collection={collection} />
+
+        <LinkDate link={link} />
+      </div>
+
+      <LinkActions link={link} collection={collection} />
+    </div>
+  );
+}
@@ -10,6 +10,7 @@ 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;
@@ -17,7 +18,7 @@ type Props = {
  className?: string;
 };

-export default function LinkCardCompact({ link, count, className }: Props) {
+export default function LinkCardGrid({ link, count, className }: Props) {
  const { collections } = useCollectionStore();

  const { links } = useLinkStore();
@@ -33,20 +34,20 @@ export default function LinkCardCompact({ link, count, className }: Props) {
  const [collection, setCollection] =
    useState<CollectionIncludingMembersAndLinkCount>(
      collections.find(
-        (e) => e.id === link.collection.id,
-      ) as CollectionIncludingMembersAndLinkCount,
+        (e) => e.id === link.collection.id
+      ) as CollectionIncludingMembersAndLinkCount
    );

  useEffect(() => {
    setCollection(
      collections.find(
-        (e) => e.id === link.collection.id,
-      ) as CollectionIncludingMembersAndLinkCount,
+        (e) => e.id === link.collection.id
+      ) as CollectionIncludingMembersAndLinkCount
    );
  }, [collections, links]);

  return (
-    <div className="border border-solid border-neutral-content bg-base-200 shadow-md hover:shadow-none duration-100 rounded-2xl relative">
+    <div className="w-full border border-solid border-neutral-content bg-base-200 shadow-md hover:shadow-none duration-100 rounded-2xl relative">
      <div
        onClick={() => link.url && window.open(link.url || "", "_blank")}
        className="flex items-center cursor-pointer p-3"
@@ -83,6 +84,25 @@ export default function LinkCardCompact({ link, count, className }: Props) {
            <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>
+            </div>
+          ) : undefined}
        </div>
      </div>

@@ -18,14 +18,14 @@ export default function LinkCollection({
  return (
    <div
      onClick={(e) => {
-        e.preventDefault();
+        e.stopPropagation();
        router.push(`/collections/${link.collection.id}`);
      }}
      className="flex items-center gap-1 max-w-full w-fit hover:opacity-70 duration-100"
    >
      <FontAwesomeIcon
        icon={faFolder}
-        className="w-4 h-4"
+        className="w-4 h-4 shadow"
        style={{ color: collection?.color }}
      />
      <p className="truncate capitalize">{collection?.name}</p>
@@ -13,7 +13,7 @@ export default function LinkIcon({
    isValidUrl(link.url || "") && link.url ? new URL(link.url) : undefined;

  const iconClasses: string =
-    "w-12 bg-primary/20 text-primary shadow rounded-md p-2 select-none z-10";
+    "w-12 bg-white text-primary shadow rounded-md p-1 select-none z-10";

  return (
    <div>
@@ -33,60 +33,56 @@ export default function LinkCardCompact({ link, count, className }: Props) {
  const [collection, setCollection] =
    useState<CollectionIncludingMembersAndLinkCount>(
      collections.find(
-        (e) => e.id === link.collection.id,
-      ) as CollectionIncludingMembersAndLinkCount,
+        (e) => e.id === link.collection.id
+      ) as CollectionIncludingMembersAndLinkCount
    );

  useEffect(() => {
    setCollection(
      collections.find(
-        (e) => e.id === link.collection.id,
-      ) as CollectionIncludingMembersAndLinkCount,
+        (e) => e.id === link.collection.id
+      ) as CollectionIncludingMembersAndLinkCount
    );
  }, [collections, links]);

  return (
-    <div className="border-b last:border-b-0 border-neutral-content relative">
-      <div
-        onClick={() => link.url && window.open(link.url || "", "_blank")}
-        className="flex items-center cursor-pointer p-3"
-      >
-        <div className="shrink-0">
-          <LinkIcon link={link} />
-        </div>
+    <>
+      <div className="border-neutral-content relative hover:bg-base-200 duration-200 rounded-lg">
+        <div
+          onClick={() => link.url && window.open(link.url || "", "_blank")}
+          className="flex items-center cursor-pointer p-3"
+        >
+          <div className="shrink-0">
+            <LinkIcon link={link} />
+          </div>

-        <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="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"
-                >
+            <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 ? (
                  <p className="truncate w-full">{shortendURL}</p>
-                </div>
-              ) : (
-                <div className="badge badge-primary badge-sm my-1">
-                  {link.type}
-                </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>
-            <span className="hidden sm:block">&middot;</span>
-            <LinkDate link={link} />
          </div>
        </div>
+
+        <LinkActions link={link} collection={collection} />
      </div>

-      <LinkActions link={link} collection={collection} />
-    </div>
+      <div className="divider my-0 last:hidden h-[1px]"></div>
+    </>
  );
 }