xwx.moe/el.xwx.moe
xwx.moe/ el.xwx.moe
1
0
Disbranĉigi 0
Fontkodo Issues Tirpetoj Actions Packages Projects Eldonoj Wiki Activity

Update LinkCard.tsx

This commit is contained in:
Yee Jia Wei 2023-12-16 12:08:28 +08:00
parent ce9b4b05d4
commit 7c35fe409f
1 changed files with 66 additions and 71 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
components/LinkCard.tsx
View File

@ -2,16 +2,11 @@ import {
CollectionIncludingMembersAndLinkCount, CollectionIncludingMembersAndLinkCount,
LinkIncludingShortenedCollectionAndTags, LinkIncludingShortenedCollectionAndTags,
} from "@/types/global"; } from "@/types/global";
import {faLink} from "@fortawesome/free-solid-svg-icons"; import { faLink } from "@fortawesome/free-solid-svg-icons";
import {FontAwesomeIcon} from "@fortawesome/react-fontawesome"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import {useEffect, useState} from "react"; import { useEffect, useState } from "react";
import Image from "next/image";
import useLinkStore from "@/store/links"; import useLinkStore from "@/store/links";
import useCollectionStore from "@/store/collections"; import useCollectionStore from "@/store/collections";
import {
faFileImage,
faFilePdf,
} from "@fortawesome/free-regular-svg-icons";
import isValidUrl from "@/lib/shared/isValidUrl"; import isValidUrl from "@/lib/shared/isValidUrl";
import unescapeString from "@/lib/client/unescapeString"; import unescapeString from "@/lib/client/unescapeString";
import LinkActions from "@/components/LinkViews/LinkComponents/LinkActions"; import LinkActions from "@/components/LinkViews/LinkComponents/LinkActions";
@ -25,23 +20,23 @@ type Props = {
className?: string; className?: string;
}; };
export default function LinkCard({link, count, className}: Props) { export default function LinkCard({ link, count, className }: Props) {
const {links} = useLinkStore(); const { links } = useLinkStore();
const {collections} = useCollectionStore(); const { collections } = useCollectionStore();
const [collection, setCollection] = const [collection, setCollection] =
useState<CollectionIncludingMembersAndLinkCount>( useState<CollectionIncludingMembersAndLinkCount>(
collections.find( collections.find(
(e) => e.id === link.collection.id (e) => e.id === link.collection.id,
) as CollectionIncludingMembersAndLinkCount ) as CollectionIncludingMembersAndLinkCount,
); );
useEffect(() => { useEffect(() => {
setCollection( setCollection(
collections.find( collections.find(
(e) => e.id === link.collection.id (e) => e.id === link.collection.id,
) as CollectionIncludingMembersAndLinkCount ) as CollectionIncludingMembersAndLinkCount,
); );
}, [collections, links]); }, [collections, links]);
@ -79,16 +74,16 @@ export default function LinkCard({link, count, className}: Props) {
{link.url ? ( {link.url ? (
<div className="flex items-center gap-1 max-w-full w-fit text-neutral"> <div className="flex items-center gap-1 max-w-full w-fit text-neutral">
<FontAwesomeIcon icon={faLink} className="mt-1 w-4 h-4"/> <FontAwesomeIcon icon={faLink} className="mt-1 w-4 h-4" />
<p className="truncate w-full">{shortendURL}</p> <p className="truncate w-full">{shortendURL}</p>
</div> </div>
) : ( ) : (
<div className="badge badge-primary badge-sm my-1">{link.type}</div> <div className="badge badge-primary badge-sm my-1">{link.type}</div>
)} )}
<LinkCollection link={link} collection={collection}/> <LinkCollection link={link} collection={collection} />
<LinkDate link={link}/> <LinkDate link={link} />
{/* {link.tags[0] ? ( {/* {link.tags[0] ? (
<div className="flex gap-3 items-center flex-wrap mt-2 truncate relative"> <div className="flex gap-3 items-center flex-wrap mt-2 truncate relative">
<div className="flex gap-1 items-center flex-nowrap"> <div className="flex gap-1 items-center flex-nowrap">
@ -112,7 +107,7 @@ export default function LinkCard({link, count, className}: Props) {
)} */} )} */}
</div> </div>
<LinkActions link={link} collection={collection}/> <LinkActions link={link} collection={collection} />
</div> </div>
); );
} }