diff --git a/components/LinkViews/Layouts/MasonryView.tsx b/components/LinkViews/Layouts/MasonryView.tsx index 9a06a0e..bceaf33 100644 --- a/components/LinkViews/Layouts/MasonryView.tsx +++ b/components/LinkViews/Layouts/MasonryView.tsx @@ -19,10 +19,11 @@ export default function MasonryView({ const breakpointColumnsObj = useMemo(() => { return { - default: 4, - 1900: 3, - [fullConfig.theme.screens.xl]: 2, - [fullConfig.theme.screens.sm]: 1, + default: 5, + 1900: 4, + 1500: 3, + 880: 2, + 550: 1, }; }, []); @@ -30,7 +31,7 @@ export default function MasonryView({ {links.map((e, i) => { return ( diff --git a/components/LinkViews/LinkComponents/LinkDate.tsx b/components/LinkViews/LinkComponents/LinkDate.tsx index 7bed676..cdd6838 100644 --- a/components/LinkViews/LinkComponents/LinkDate.tsx +++ b/components/LinkViews/LinkComponents/LinkDate.tsx @@ -15,7 +15,7 @@ export default function LinkDate({ }); return ( -
+

{formattedDate}

diff --git a/components/LinkViews/LinkComponents/LinkIcon.tsx b/components/LinkViews/LinkComponents/LinkIcon.tsx index 3076a1f..055b432 100644 --- a/components/LinkViews/LinkComponents/LinkIcon.tsx +++ b/components/LinkViews/LinkComponents/LinkIcon.tsx @@ -5,23 +5,35 @@ import React from "react"; export default function LinkIcon({ link, - width, className, + size, }: { link: LinkIncludingShortenedCollectionAndTags; - width?: string; className?: string; + size?: "small" | "medium"; }) { + let iconClasses: string = + "bg-white shadow rounded-md border-[2px] flex item-center justify-center border-white select-none z-10 " + + (className || ""); + + let dimension; + + switch (size) { + case "small": + dimension = " w-8 h-8"; + break; + case "medium": + dimension = " w-12 h-12"; + break; + default: + size = "medium"; + dimension = " w-12 h-12"; + break; + } + const url = isValidUrl(link.url || "") && link.url ? new URL(link.url) : undefined; - const iconClasses: string = - "bg-white shadow rounded-md border-[2px] flex item-center justify-center border-white select-none z-10" + - " " + - (width || "w-12") + - " " + - (className || ""); - const [showFavicon, setShowFavicon] = React.useState(true); return ( @@ -33,23 +45,29 @@ export default function LinkIcon({ width={64} height={64} alt="" - className={iconClasses} + className={iconClasses + dimension} draggable="false" onError={() => { setShowFavicon(false); }} /> ) : ( - + ) ) : link.type === "pdf" ? ( ) : link.type === "image" ? ( ) : undefined} @@ -59,13 +77,19 @@ export default function LinkIcon({ const LinkPlaceholderIcon = ({ iconClasses, + size, icon, }: { iconClasses: string; + size?: "small" | "medium"; icon: string; }) => { return ( -
+
); diff --git a/components/LinkViews/LinkComponents/LinkTypeBadge.tsx b/components/LinkViews/LinkComponents/LinkTypeBadge.tsx index e491330..b7563e4 100644 --- a/components/LinkViews/LinkComponents/LinkTypeBadge.tsx +++ b/components/LinkViews/LinkComponents/LinkTypeBadge.tsx @@ -27,8 +27,8 @@ export default function LinkTypeBadge({ }} className="flex gap-1 item-center select-none text-neutral mt-1 hover:opacity-70 duration-100" > - -

{shortendURL}

+ +

{shortendURL}

) : (
diff --git a/components/LinkViews/LinkList.tsx b/components/LinkViews/LinkList.tsx index e5bd8bc..1f13a5f 100644 --- a/components/LinkViews/LinkList.tsx +++ b/components/LinkViews/LinkList.tsx @@ -125,8 +125,7 @@ export default function LinkCardCompact({
diff --git a/components/LinkViews/LinkMasonry.tsx b/components/LinkViews/LinkMasonry.tsx index 5e886a8..e3315a5 100644 --- a/components/LinkViews/LinkMasonry.tsx +++ b/components/LinkViews/LinkMasonry.tsx @@ -141,7 +141,6 @@ export default function LinkMasonry({ link, flipDropdown, editMode }: Props) { height={720} alt="" className="rounded-t-2xl select-none object-cover z-10 h-40 w-full shadow opacity-80 scale-105" - style={{ filter: "blur(2px)" }} draggable="false" onError={(e) => { const target = e.target as HTMLElement; @@ -151,9 +150,6 @@ export default function LinkMasonry({ link, flipDropdown, editMode }: Props) { ) : link.preview === "unavailable" ? null : (
)} -
- -
{link.preview !== "unavailable" && ( @@ -162,15 +158,21 @@ export default function LinkMasonry({ link, flipDropdown, editMode }: Props) {
-

{unescapeString(link.name)}

+
+ +
+

{unescapeString(link.name)}

+ {link.description && ( +

{unescapeString(link.description)}

+ )}
- {link.description && ( -

{unescapeString(link.description)}

- )} - {link.tags[0] && (
{link.tags.map((e, i) => ( @@ -191,8 +193,8 @@ export default function LinkMasonry({ link, flipDropdown, editMode }: Props) {
-
-
+
+
{collection && ( )}