diff --git a/components/LinkViews/CompactGridView.tsx b/components/LinkViews/CompactGridView.tsx deleted file mode 100644 index f71ac5ca..00000000 --- a/components/LinkViews/CompactGridView.tsx +++ /dev/null @@ -1,16 +0,0 @@ -import LinkCardCompact from "@/components/LinkViews/LinkComponents/LinkCardCompact"; -import { LinkIncludingShortenedCollectionAndTags } from "@/types/global"; - -export default function CompactGridView({ - links, -}: { - links: LinkIncludingShortenedCollectionAndTags[]; -}) { - return ( -
- {links.map((e, i) => { - return ; - })} -
- ); -} diff --git a/components/LinkViews/DefaultGridView.tsx b/components/LinkViews/DefaultView.tsx similarity index 84% rename from components/LinkViews/DefaultGridView.tsx rename to components/LinkViews/DefaultView.tsx index 7dbbc793..714ee732 100644 --- a/components/LinkViews/DefaultGridView.tsx +++ b/components/LinkViews/DefaultView.tsx @@ -1,4 +1,4 @@ -import LinkCard from "@/components/LinkCard"; +import LinkCard from "@/components/LinkViews/LinkComponents/LinkCard"; import { LinkIncludingShortenedCollectionAndTags } from "@/types/global"; export default function DefaultGridView({ diff --git a/components/LinkViews/GridView.tsx b/components/LinkViews/GridView.tsx new file mode 100644 index 00000000..1b55f26a --- /dev/null +++ b/components/LinkViews/GridView.tsx @@ -0,0 +1,20 @@ +import LinkCardGrid from "@/components/LinkViews/LinkComponents/LinkCardGrid"; +import { LinkIncludingShortenedCollectionAndTags } from "@/types/global"; + +export default function CompactGridView({ + links, +}: { + links: LinkIncludingShortenedCollectionAndTags[]; +}) { + return ( +
+ {links.map((e, i) => { + return ( +
+ +
+ ); + })} +
+ ); +} diff --git a/components/LinkCard.tsx b/components/LinkViews/LinkComponents/LinkCard.tsx similarity index 79% rename from components/LinkCard.tsx rename to components/LinkViews/LinkComponents/LinkCard.tsx index 1a9c80e9..a1787d13 100644 --- a/components/LinkCard.tsx +++ b/components/LinkViews/LinkComponents/LinkCard.tsx @@ -28,15 +28,15 @@ export default function LinkCard({ link, count, className }: Props) { const [collection, setCollection] = useState( 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]); @@ -84,27 +84,6 @@ export default function LinkCard({ link, count, className }: Props) { - {/* {link.tags[0] ? ( -
-
-{link.tags.map((e, i) => ( - { - e.stopPropagation(); - }} - className="btn btn-xs btn-ghost truncate max-w-[19rem]" -> - #{e.name} - -))} -
-
-
-) : ( -

No Tags

-)} */} diff --git a/components/LinkViews/LinkComponents/LinkCardCompact.tsx b/components/LinkViews/LinkComponents/LinkCardGrid.tsx similarity index 69% rename from components/LinkViews/LinkComponents/LinkCardCompact.tsx rename to components/LinkViews/LinkComponents/LinkCardGrid.tsx index 2e6f60ef..ae4c77a1 100644 --- a/components/LinkViews/LinkComponents/LinkCardCompact.tsx +++ b/components/LinkViews/LinkComponents/LinkCardGrid.tsx @@ -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( 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 ( -
+
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) { ·
+

{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/LinkCollection.tsx b/components/LinkViews/LinkComponents/LinkCollection.tsx index 606352a0..16c9bb5f 100644 --- a/components/LinkViews/LinkComponents/LinkCollection.tsx +++ b/components/LinkViews/LinkComponents/LinkCollection.tsx @@ -18,14 +18,14 @@ export default function LinkCollection({ return (
{ - 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" >

{collection?.name}

diff --git a/components/LinkViews/LinkComponents/LinkIcon.tsx b/components/LinkViews/LinkComponents/LinkIcon.tsx index e9d08cbd..cc5f3856 100644 --- a/components/LinkViews/LinkComponents/LinkIcon.tsx +++ b/components/LinkViews/LinkComponents/LinkIcon.tsx @@ -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 (
diff --git a/components/LinkViews/LinkComponents/LinkRow.tsx b/components/LinkViews/LinkComponents/LinkRow.tsx index 2c2f5c93..6b9fda86 100644 --- a/components/LinkViews/LinkComponents/LinkRow.tsx +++ b/components/LinkViews/LinkComponents/LinkRow.tsx @@ -33,60 +33,56 @@ export default function LinkCardCompact({ link, count, className }: Props) { const [collection, setCollection] = useState( 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 ( -
-
link.url && window.open(link.url || "", "_blank")} - className="flex items-center cursor-pointer p-3" - > -
- -
+ <> +
+
link.url && window.open(link.url || "", "_blank")} + className="flex items-center cursor-pointer p-3" + > +
+ +
-
-

- {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" - > +
+
+ + · + {link.url ? (

{shortendURL}

-
- ) : ( -
- {link.type} -
- )} + ) : ( +
+ {link.type} +
+ )} +
+ · +
- · -
+ +
- -
+
+ ); } diff --git a/components/LinkViews/ListView.tsx b/components/LinkViews/ListView.tsx index bb06327e..8b08add7 100644 --- a/components/LinkViews/ListView.tsx +++ b/components/LinkViews/ListView.tsx @@ -7,12 +7,10 @@ export default function ListView({ links: LinkIncludingShortenedCollectionAndTags[]; }) { return ( -
-
- {links.map((e, i) => { - return ; - })} -
+
+ {links.map((e, i) => { + return ; + })}
); } diff --git a/components/ViewDropdown.tsx b/components/ViewDropdown.tsx index 2d2ea4ad..ac547e60 100644 --- a/components/ViewDropdown.tsx +++ b/components/ViewDropdown.tsx @@ -1,71 +1,71 @@ -import React, {Dispatch, SetStateAction, useEffect, useState} from "react"; +import React, { Dispatch, SetStateAction, useEffect, useState } from "react"; import useLocalSettingsStore from "@/store/localSettings"; -import {ViewMode} from "@/types/global"; +import { ViewMode } from "@/types/global"; type Props = { - viewMode: string; - setViewMode: Dispatch>; + viewMode: string; + setViewMode: Dispatch>; }; -export default function ViewDropdown({viewMode, setViewMode}: Props) { - const {updateSettings} = useLocalSettingsStore(); +export default function ViewDropdown({ viewMode, setViewMode }: Props) { + const { updateSettings } = useLocalSettingsStore(); - const onChangeViewMode = (e: React.MouseEvent, viewMode: ViewMode) => { - setViewMode(viewMode); - } + const onChangeViewMode = ( + e: React.MouseEvent, + viewMode: ViewMode + ) => { + setViewMode(viewMode); + }; - useEffect(() => { - updateSettings({viewMode: viewMode as ViewMode}); - }, [viewMode]); + useEffect(() => { + updateSettings({ viewMode: viewMode as ViewMode }); + }, [viewMode]); - return ( -
- - - -
- ); + return ( +
+ + {/* */} + +
+ ); } diff --git a/pages/collections/[id].tsx b/pages/collections/[id].tsx index 08ff8dc5..8e1cf1d6 100644 --- a/pages/collections/[id].tsx +++ b/pages/collections/[id].tsx @@ -1,4 +1,4 @@ -import LinkCard from "@/components/LinkCard"; +import LinkCard from "@/components/LinkViews/LinkComponents/LinkCard"; import useCollectionStore from "@/store/collections"; import useLinkStore from "@/store/links"; import { CollectionIncludingMembersAndLinkCount, Sort } from "@/types/global"; diff --git a/pages/dashboard.tsx b/pages/dashboard.tsx index 0cd4bde0..5788b73b 100644 --- a/pages/dashboard.tsx +++ b/pages/dashboard.tsx @@ -13,7 +13,7 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import MainLayout from "@/layouts/MainLayout"; import useLinkStore from "@/store/links"; import useTagStore from "@/store/tags"; -import LinkCard from "@/components/LinkCard"; +import LinkCard from "@/components/LinkViews/LinkComponents/LinkCard"; import { useEffect, useState } from "react"; import useLinks from "@/hooks/useLinks"; import Link from "next/link"; diff --git a/pages/links/index.tsx b/pages/links/index.tsx index 0c4670dd..6eddd6ec 100644 --- a/pages/links/index.tsx +++ b/pages/links/index.tsx @@ -1,4 +1,4 @@ -import LinkCard from "@/components/LinkCard"; +import LinkCard from "@/components/LinkViews/LinkComponents/LinkCard"; import NoLinksFound from "@/components/NoLinksFound"; import SortDropdown from "@/components/SortDropdown"; import useLinks from "@/hooks/useLinks"; @@ -9,21 +9,23 @@ import { faLink } from "@fortawesome/free-solid-svg-icons"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { useState } from "react"; import ViewDropdown from "@/components/ViewDropdown"; -import DefaultGridView from "@/components/LinkViews/DefaultGridView"; -import CompactGridView from "@/components/LinkViews/CompactGridView"; +import DefaultView from "@/components/LinkViews/DefaultView"; +import GridView from "@/components/LinkViews/GridView"; import ListView from "@/components/LinkViews/ListView"; export default function Links() { const { links } = useLinkStore(); - const [viewMode, setViewMode] = useState(localStorage.getItem('viewMode') || ViewMode.Default); + const [viewMode, setViewMode] = useState( + localStorage.getItem("viewMode") || ViewMode.Default + ); const [sortBy, setSortBy] = useState(Sort.DateNewestFirst); useLinks({ sort: sortBy }); const components = { - [ViewMode.Default]: DefaultGridView, - [ViewMode.Compact]: CompactGridView, + [ViewMode.Default]: DefaultView, + // [ViewMode.Grid]: GridView, [ViewMode.List]: ListView, }; diff --git a/pages/links/pinned.tsx b/pages/links/pinned.tsx index ac52af2b..d6ba326e 100644 --- a/pages/links/pinned.tsx +++ b/pages/links/pinned.tsx @@ -1,4 +1,4 @@ -import LinkCard from "@/components/LinkCard"; +import LinkCard from "@/components/LinkViews/LinkComponents/LinkCard"; import SortDropdown from "@/components/SortDropdown"; import useLinks from "@/hooks/useLinks"; import MainLayout from "@/layouts/MainLayout"; diff --git a/pages/search.tsx b/pages/search.tsx index d05a20ad..ac54ca7f 100644 --- a/pages/search.tsx +++ b/pages/search.tsx @@ -1,5 +1,5 @@ import FilterSearchDropdown from "@/components/FilterSearchDropdown"; -import LinkCard from "@/components/LinkCard"; +import LinkCard from "@/components/LinkViews/LinkComponents/LinkCard"; import SortDropdown from "@/components/SortDropdown"; import useLinks from "@/hooks/useLinks"; import MainLayout from "@/layouts/MainLayout"; diff --git a/pages/tags/[id].tsx b/pages/tags/[id].tsx index 29c417f9..8adfdc47 100644 --- a/pages/tags/[id].tsx +++ b/pages/tags/[id].tsx @@ -1,4 +1,4 @@ -import LinkCard from "@/components/LinkCard"; +import LinkCard from "@/components/LinkViews/LinkComponents/LinkCard"; import useLinkStore from "@/store/links"; import { faCheck, diff --git a/types/global.ts b/types/global.ts index c2356b59..49505bda 100644 --- a/types/global.ts +++ b/types/global.ts @@ -59,7 +59,7 @@ export interface PublicCollectionIncludingLinks extends Collection { export enum ViewMode { Default = "default", - Compact = "compact", + Grid = "grid", List = "list", }