update responsive

2023-12-16 12:16:56 +08:00
parent 7c35fe409f
commit e0bb7ffa08
6 changed files with 134 additions and 229 deletions
@@ -0,0 +1,92 @@
+import {
+  CollectionIncludingMembersAndLinkCount,
+  LinkIncludingShortenedCollectionAndTags,
+} from "@/types/global";
+import { useEffect, useState } from "react";
+import useLinkStore from "@/store/links";
+import useCollectionStore from "@/store/collections";
+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 LinkCardCompact({ link, count, className }: Props) {
+  const { collections } = useCollectionStore();
+
+  const { links } = useLinkStore();
+
+  let shortendURL;
+
+  try {
+    shortendURL = new URL(link.url || "").host.toLowerCase();
+  } catch (error) {
+    console.log(error);
+  }
+
+  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]);
+
+  return (
+    <div className="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"
+      >
+        <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="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>
+        </div>
+      </div>
+
+      <LinkActions link={link} collection={collection} />
+    </div>
+  );
+}
@@ -12,34 +12,29 @@ export default function LinkIcon({
  const url =
    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";
+  const iconClasses: string =
+    "w-12 bg-primary/20 text-primary shadow rounded-md p-2 select-none z-10";

  return (
    <div>
-        {link.url && url ? (
-            <Image
-                src={`https://t2.gstatic.com/faviconV2?client=SOCIAL&type=FAVICON&fallback_opts=TYPE,SIZE,URL&url=${link.url}&size=32`}
-                width={64}
-                height={64}
-                alt=""
-                className={iconClasses}
-                draggable="false"
-                onError={(e) => {
-                    const target = e.target as HTMLElement;
-                    target.style.display = "none";
-                }}
-            />
-        ) : link.type === "pdf" ? (
-            <FontAwesomeIcon
-                icon={faFilePdf}
-                className={iconClasses}
-            />
-        ) : link.type === "image" ? (
-            <FontAwesomeIcon
-                icon={faFileImage}
-                className={iconClasses}
-            />
-        ) : undefined}
+      {link.url && url ? (
+        <Image
+          src={`https://t2.gstatic.com/faviconV2?client=SOCIAL&type=FAVICON&fallback_opts=TYPE,SIZE,URL&url=${link.url}&size=32`}
+          width={64}
+          height={64}
+          alt=""
+          className={iconClasses}
+          draggable="false"
+          onError={(e) => {
+            const target = e.target as HTMLElement;
+            target.style.display = "none";
+          }}
+        />
+      ) : link.type === "pdf" ? (
+        <FontAwesomeIcon icon={faFilePdf} className={iconClasses} />
+      ) : link.type === "image" ? (
+        <FontAwesomeIcon icon={faFileImage} className={iconClasses} />
+      ) : undefined}
    </div>
  );
 }
@@ -0,0 +1,92 @@
+import {
+  CollectionIncludingMembersAndLinkCount,
+  LinkIncludingShortenedCollectionAndTags,
+} from "@/types/global";
+import { useEffect, useState } from "react";
+import useLinkStore from "@/store/links";
+import useCollectionStore from "@/store/collections";
+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 LinkCardCompact({ link, count, className }: Props) {
+  const { collections } = useCollectionStore();
+
+  const { links } = useLinkStore();
+
+  let shortendURL;
+
+  try {
+    shortendURL = new URL(link.url || "").host.toLowerCase();
+  } catch (error) {
+    console.log(error);
+  }
+
+  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]);
+
+  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="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>
+        </div>
+      </div>
+
+      <LinkActions link={link} collection={collection} />
+    </div>
+  );
+}