diff --git a/components/LinkViews/Layouts/GridView.tsx b/components/LinkViews/Layouts/GridView.tsx index 1cdbd35..005ba28 100644 --- a/components/LinkViews/Layouts/GridView.tsx +++ b/components/LinkViews/Layouts/GridView.tsx @@ -7,13 +7,9 @@ export default function GridView({ links: LinkIncludingShortenedCollectionAndTags[]; }) { return ( -
+
{links.map((e, i) => { - return ( -
- -
- ); + return ; })}
); diff --git a/components/LinkViews/LinkCard.tsx b/components/LinkViews/LinkCard.tsx index 2336124..61d4bba 100644 --- a/components/LinkViews/LinkCard.tsx +++ b/components/LinkViews/LinkCard.tsx @@ -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( @@ -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 ( -
+
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" > -
- -
+ +

+ {unescapeString(link.name || link.description) || link.url} +

-
-

{count + 1}

-

- {unescapeString(link.name || link.description) || link.url} -

-
- - {link.url ? ( -
- -

{shortendURL}

+
+
+ + · + {link.url ? ( +
{ + e.preventDefault(); + window.open(link.url || "", "_blank"); + }} + className="flex items-center hover:opacity-60 cursor-pointer duration-100" + > +

{shortendURL}

+
+ ) : ( +
+ {link.type} +
+ )}
- ) : ( -
{link.type}
- )} - - - - + +
+ {/*

{unescapeString(link.description)}

+ {link.tags[0] ? ( +
+
+ {link.tags.map((e, i) => ( + { + e.stopPropagation(); + }} + className="btn btn-xs btn-ghost truncate max-w-[19rem]" + > + #{e.name} + + ))} +
+
+ ) : undefined} */}
- +
); } diff --git a/components/LinkViews/LinkComponents/LinkActions.tsx b/components/LinkViews/LinkComponents/LinkActions.tsx index 015e32d..0c4adf1 100644 --- a/components/LinkViews/LinkComponents/LinkActions.tsx +++ b/components/LinkViews/LinkComponents/LinkActions.tsx @@ -55,7 +55,7 @@ export default function LinkActions({ link, collection, position }: Props) { }; return ( -
+ <>
- +
    {permissions === true ? ( @@ -154,6 +150,6 @@ export default function LinkActions({ link, collection, position }: Props) { {/* {expandedLink ? ( setExpandedLink(false)} link={link} /> ) : undefined} */} -
+ ); } diff --git a/components/LinkViews/LinkComponents/LinkIcon.tsx b/components/LinkViews/LinkComponents/LinkIcon.tsx index 4e423bf..583d721 100644 --- a/components/LinkViews/LinkComponents/LinkIcon.tsx +++ b/components/LinkViews/LinkComponents/LinkIcon.tsx @@ -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; }) { diff --git a/components/LinkViews/LinkGrid.tsx b/components/LinkViews/LinkGrid.tsx index 89ebcf1..ac8a31d 100644 --- a/components/LinkViews/LinkGrid.tsx +++ b/components/LinkViews/LinkGrid.tsx @@ -47,63 +47,57 @@ export default function LinkGrid({ link, count, className }: Props) { }, [collections, links]); return ( -
+
link.url && window.open(link.url || "", "_blank")} - className="flex items-center cursor-pointer p-3" + className="cursor-pointer" > -
- -
+ +

+ {unescapeString(link.name || link.description) || link.url} +

-
-

- {unescapeString(link.name || link.description) || link.url} -

- -
-
- - · - {link.url ? ( -
{ - e.preventDefault(); - window.open(link.url || "", "_blank"); - }} - className="flex items-center hover:opacity-60 cursor-pointer duration-100" - > -

{shortendURL}

-
- ) : ( -
- {link.type} -
- )} -
- · - -
-

{unescapeString(link.description)}

- {link.tags[0] ? ( -
-
- {link.tags.map((e, i) => ( - { - e.stopPropagation(); - }} - className="btn btn-xs btn-ghost truncate max-w-[19rem]" - > - #{e.name} - - ))} +
+
+ + · + {link.url ? ( +
{ + e.preventDefault(); + window.open(link.url || "", "_blank"); + }} + className="flex items-center hover:opacity-60 cursor-pointer duration-100" + > +

{shortendURL}

-
- ) : undefined} + ) : ( +
+ {link.type} +
+ )} +
+
+

{unescapeString(link.description)}

+ {link.tags[0] ? ( +
+
+ {link.tags.map((e, i) => ( + { + e.stopPropagation(); + }} + className="btn btn-xs btn-ghost truncate max-w-[19rem]" + > + #{e.name} + + ))} +
+
+ ) : undefined}
diff --git a/components/ViewDropdown.tsx b/components/ViewDropdown.tsx index 2be399a..23558d2 100644 --- a/components/ViewDropdown.tsx +++ b/components/ViewDropdown.tsx @@ -25,48 +25,36 @@ export default function ViewDropdown({ viewMode, setViewMode }: Props) { return (
{/* */}
); diff --git a/pages/collections/[id].tsx b/pages/collections/[id].tsx index 9df5819..aa8ebd7 100644 --- a/pages/collections/[id].tsx +++ b/pages/collections/[id].tsx @@ -1,4 +1,3 @@ -import LinkCard from "@/components/LinkViews/LinkCard"; import useCollectionStore from "@/store/collections"; import useLinkStore from "@/store/links"; import { @@ -22,7 +21,7 @@ import EditCollectionSharingModal from "@/components/ModalContent/EditCollection import DeleteCollectionModal from "@/components/ModalContent/DeleteCollectionModal"; import ViewDropdown from "@/components/ViewDropdown"; import CardView from "@/components/LinkViews/Layouts/CardView"; -import GridView from "@/components/LinkViews/Layouts/GridView"; +// import GridView from "@/components/LinkViews/Layouts/GridView"; import ListView from "@/components/LinkViews/Layouts/ListView"; export default function Index() { @@ -87,11 +86,11 @@ export default function Index() { const [deleteCollectionModal, setDeleteCollectionModal] = useState(false); const [viewMode, setViewMode] = useState( - localStorage.getItem("viewMode") || ViewMode.Default + localStorage.getItem("viewMode") || ViewMode.Card ); const linkView = { - [ViewMode.Default]: CardView, + [ViewMode.Card]: CardView, // [ViewMode.Grid]: GridView, [ViewMode.List]: ListView, }; diff --git a/pages/links/index.tsx b/pages/links/index.tsx index 40d59f1..9169398 100644 --- a/pages/links/index.tsx +++ b/pages/links/index.tsx @@ -15,14 +15,14 @@ export default function Links() { const { links } = useLinkStore(); const [viewMode, setViewMode] = useState( - localStorage.getItem("viewMode") || ViewMode.Default + localStorage.getItem("viewMode") || ViewMode.Card ); const [sortBy, setSortBy] = useState(Sort.DateNewestFirst); useLinks({ sort: sortBy }); const linkView = { - [ViewMode.Default]: CardView, + [ViewMode.Card]: CardView, // [ViewMode.Grid]: GridView, [ViewMode.List]: ListView, }; diff --git a/pages/links/pinned.tsx b/pages/links/pinned.tsx index 2c754a4..c6b5ee0 100644 --- a/pages/links/pinned.tsx +++ b/pages/links/pinned.tsx @@ -8,19 +8,20 @@ import { Sort, ViewMode } from "@/types/global"; 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"; export default function PinnedLinks() { const { links } = useLinkStore(); const [viewMode, setViewMode] = useState( - localStorage.getItem("viewMode") || ViewMode.Default + localStorage.getItem("viewMode") || ViewMode.Card ); const [sortBy, setSortBy] = useState(Sort.DateNewestFirst); useLinks({ sort: sortBy, pinnedOnly: true }); const linkView = { - [ViewMode.Default]: CardView, + [ViewMode.Card]: CardView, // [ViewMode.Grid]: GridView, [ViewMode.List]: ListView, }; diff --git a/pages/search.tsx b/pages/search.tsx index c8b9f1b..32dbf96 100644 --- a/pages/search.tsx +++ b/pages/search.tsx @@ -8,7 +8,7 @@ import { useRouter } from "next/router"; import React, { useState } from "react"; import ViewDropdown from "@/components/ViewDropdown"; import CardView from "@/components/LinkViews/Layouts/CardView"; -import GridView from "@/components/LinkViews/Layouts/GridView"; +// import GridView from "@/components/LinkViews/Layouts/GridView"; import ListView from "@/components/LinkViews/Layouts/ListView"; import PageHeader from "@/components/PageHeader"; @@ -28,7 +28,7 @@ export default function Search() { const [filterDropdown, setFilterDropdown] = useState(false); const [viewMode, setViewMode] = useState( - localStorage.getItem("viewMode") || ViewMode.Default + localStorage.getItem("viewMode") || ViewMode.Card ); const [sortBy, setSortBy] = useState(Sort.DateNewestFirst); @@ -43,7 +43,7 @@ export default function Search() { }); const linkView = { - [ViewMode.Default]: CardView, + [ViewMode.Card]: CardView, // [ViewMode.Grid]: GridView, [ViewMode.List]: ListView, }; diff --git a/pages/tags/[id].tsx b/pages/tags/[id].tsx index 52f134e..a4cbb69 100644 --- a/pages/tags/[id].tsx +++ b/pages/tags/[id].tsx @@ -9,7 +9,7 @@ import useLinks from "@/hooks/useLinks"; import { toast } from "react-hot-toast"; import ViewDropdown from "@/components/ViewDropdown"; import CardView from "@/components/LinkViews/Layouts/CardView"; -import GridView from "@/components/LinkViews/Layouts/GridView"; +// import GridView from "@/components/LinkViews/Layouts/GridView"; import ListView from "@/components/LinkViews/Layouts/ListView"; export default function Index() { @@ -91,11 +91,11 @@ export default function Index() { }; const [viewMode, setViewMode] = useState( - localStorage.getItem("viewMode") || ViewMode.Default + localStorage.getItem("viewMode") || ViewMode.Card ); const linkView = { - [ViewMode.Default]: CardView, + [ViewMode.Card]: CardView, // [ViewMode.Grid]: GridView, [ViewMode.List]: ListView, }; diff --git a/types/global.ts b/types/global.ts index 49505bd..8b3efcf 100644 --- a/types/global.ts +++ b/types/global.ts @@ -58,7 +58,7 @@ export interface PublicCollectionIncludingLinks extends Collection { } export enum ViewMode { - Default = "default", + Card = "card", Grid = "grid", List = "list", }