diff --git a/components/LinkViews/LinkCard.tsx b/components/LinkViews/LinkCard.tsx index c490cec1..3efed9d9 100644 --- a/components/LinkViews/LinkCard.tsx +++ b/components/LinkViews/LinkCard.tsx @@ -134,15 +134,16 @@ export default function LinkGrid({ link, count, className }: Props) {

{shortendURL}

+ -
- -
-
+
+
+
+ {collection ? ( -
- + ) : undefined}
+
{showInfo ? ( @@ -153,9 +154,24 @@ export default function LinkGrid({ link, count, className }: Props) { >
-
-

{unescapeString(link.description)}

- {link.tags[0] ? ( +

Description

+ +
+

+ {link.description ? ( + unescapeString(link.description) + ) : ( + + No description provided. + + )} +

+ {link.tags[0] ? ( + <> +

Tags

+ +
+
{link.tags.map((e, i) => ( @@ -172,8 +188,8 @@ export default function LinkGrid({ link, count, className }: Props) { ))}
- ) : undefined} -
+ + ) : undefined} ) : undefined} diff --git a/components/LinkViews/LinkComponents/LinkActions.tsx b/components/LinkViews/LinkComponents/LinkActions.tsx index e3eb4b84..777fe5f8 100644 --- a/components/LinkViews/LinkComponents/LinkActions.tsx +++ b/components/LinkViews/LinkComponents/LinkActions.tsx @@ -101,7 +101,7 @@ export default function LinkActions({ toggleShowInfo(); }} > - {!linkInfo ? "Show" : "Hide"} Link Info + {!linkInfo ? "Show" : "Hide"} Link Details {permissions === true || permissions?.canUpdate ? ( diff --git a/components/LinkViews/LinkList.tsx b/components/LinkViews/LinkList.tsx index 955e5307..c0ab6c46 100644 --- a/components/LinkViews/LinkList.tsx +++ b/components/LinkViews/LinkList.tsx @@ -50,7 +50,11 @@ export default function LinkCardCompact({ link, count, className }: Props) { return ( <> -
+
link.url && window.open(link.url || "", "_blank")} className="flex items-center cursor-pointer py-3 px-3" @@ -66,8 +70,12 @@ export default function LinkCardCompact({ link, count, className }: Props) {
- - · + {collection ? ( + <> + + · + + ) : undefined} {link.url ? (
@@ -93,26 +101,45 @@ export default function LinkCardCompact({ link, count, className }: Props) { linkInfo={showInfo} /> {showInfo ? ( -
-
-

{unescapeString(link.description)}

+
+
+

Description

+ +
+

+ {link.description ? ( + unescapeString(link.description) + ) : ( + + No description provided. + + )} +

{link.tags[0] ? ( -
-
- {link.tags.map((e, i) => ( - { - e.stopPropagation(); - }} - className="btn btn-xs btn-ghost truncate max-w-[19rem]" - > - #{e.name} - - ))} + <> +

+ Tags +

+ +
+ +
+
+ {link.tags.map((e, i) => ( + { + e.stopPropagation(); + }} + className="btn btn-xs btn-ghost truncate max-w-[19rem]" + > + #{e.name} + + ))} +
-
+ ) : undefined}
diff --git a/components/PublicPage/PublicLinkCard.tsx b/components/PublicPage/PublicLinkCard.tsx deleted file mode 100644 index 97c95861..00000000 --- a/components/PublicPage/PublicLinkCard.tsx +++ /dev/null @@ -1,132 +0,0 @@ -import Image from "next/image"; -import { Link as LinkType, Tag } from "@prisma/client"; -import isValidUrl from "@/lib/shared/isValidUrl"; -import unescapeString from "@/lib/client/unescapeString"; -import { TagIncludingLinkCount } from "@/types/global"; -import Link from "next/link"; -import { useState } from "react"; -import PreservedFormatsModal from "../ModalContent/PreservedFormatsModal"; - -interface LinksIncludingTags extends LinkType { - tags: TagIncludingLinkCount[]; -} - -type Props = { - link: LinksIncludingTags; - count: number; -}; - -export default function LinkCard({ link, count }: Props) { - const url = link.url && isValidUrl(link.url) ? new URL(link.url) : undefined; - - const formattedDate = new Date( - link.createdAt as unknown as string - ).toLocaleString("en-US", { - year: "numeric", - month: "short", - day: "numeric", - }); - - const [preservedFormatsModal, setPreservedFormatsModal] = useState(false); - - return ( -
-
-
-
-

- {url && ( - { - const target = e.target as HTMLElement; - target.style.display = "none"; - }} - /> - )} - {unescapeString(link.name || link.description)} -

-
- -
-
- {link.tags.map((e, i) => ( - - #{e.name} - - ))} -
-
-
-

{formattedDate}

-

ยท

- - {url ? url.host : link.url} - -
-
- {unescapeString(link.description)}{" "} - -

Visit

- - -
-
-
-
-
- -
-
    -
  • -
    { - (document?.activeElement as HTMLElement)?.blur(); - setPreservedFormatsModal(true); - // updateArchive(); - }} - > - Preserved Formats -
    -
    • -
-
- {preservedFormatsModal ? ( - setPreservedFormatsModal(false)} - activeLink={link as any} - /> - ) : undefined} -
- ); -} diff --git a/pages/public/collections/[id].tsx b/pages/public/collections/[id].tsx index 586ca4ac..7220615e 100644 --- a/pages/public/collections/[id].tsx +++ b/pages/public/collections/[id].tsx @@ -1,7 +1,10 @@ "use client"; -import PublicLinkCard from "@/components/PublicPage/PublicLinkCard"; import getPublicCollectionData from "@/lib/client/getPublicCollectionData"; -import { CollectionIncludingMembersAndLinkCount, Sort } from "@/types/global"; +import { + CollectionIncludingMembersAndLinkCount, + Sort, + ViewMode, +} from "@/types/global"; import { useRouter } from "next/router"; import React, { useEffect, useState } from "react"; import { motion, Variants } from "framer-motion"; @@ -18,6 +21,10 @@ import SortDropdown from "@/components/SortDropdown"; import useLocalSettingsStore from "@/store/localSettings"; import SearchBar from "@/components/SearchBar"; import EditCollectionSharingModal from "@/components/ModalContent/EditCollectionSharingModal"; +import ViewDropdown from "@/components/ViewDropdown"; +import CardView from "@/components/LinkViews/Layouts/CardView"; +import ListView from "@/components/LinkViews/Layouts/ListView"; +// import GridView from "@/components/LinkViews/Layouts/GridView"; const cardVariants: Variants = { offscreen: { @@ -94,6 +101,19 @@ export default function PublicCollections() { const [editCollectionSharingModal, setEditCollectionSharingModal] = useState(false); + const [viewMode, setViewMode] = useState( + localStorage.getItem("viewMode") || ViewMode.Card + ); + + const linkView = { + [ViewMode.Card]: CardView, + // [ViewMode.Grid]: GridView, + [ViewMode.List]: ListView, + }; + + // @ts-ignore + const LinkComponent = linkView[viewMode]; + return collection ? (
-
+
-
-
- -
+
+ -
- -
+ + +
-
- {links - ?.filter((e) => e.collectionId === Number(router.query.id)) - .map((e, i) => { - const linkWithCollectionData = { - ...e, - collection: collection, // Append collection data - }; - - return ( - - - - - - ); - })} -
+ {links[0] ? ( + e.collectionId === Number(router.query.id)) + .map((e, i) => { + const linkWithCollectionData = { + ...e, + collection: collection, // Append collection data + }; + return linkWithCollectionData; + })} + /> + ) : ( +

This collection is empty...

+ )} {/*

List created with Linkwarden.