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

137
components/LinkCard.tsx
View File

@ -1,17 +1,12 @@
import { 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";
@ -20,76 +15,76 @@ import LinkCollection from "@/components/LinkViews/LinkComponents/LinkCollection
import LinkIcon from "@/components/LinkViews/LinkComponents/LinkIcon"; import LinkIcon from "@/components/LinkViews/LinkComponents/LinkIcon";
type Props = { type Props = {
link: LinkIncludingShortenedCollectionAndTags; link: LinkIncludingShortenedCollectionAndTags;
count: number; count: number;
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]);
let shortendURL; let shortendURL;
try { try {
shortendURL = new URL(link.url || "").host.toLowerCase(); shortendURL = new URL(link.url || "").host.toLowerCase();
} catch (error) { } catch (error) {
console.log(error); console.log(error);
} }
const url = const url =
isValidUrl(link.url || "") && link.url ? new URL(link.url) : undefined; isValidUrl(link.url || "") && link.url ? new URL(link.url) : undefined;
return ( return (
<div <div
className={`h-fit hover:bg-base-300 hover:border-base-300 border border-solid border-neutral-content bg-base-200 shadow-md hover:shadow-none duration-200 rounded-2xl relative ${ className={`h-fit hover:bg-base-300 hover:border-base-300 border border-solid border-neutral-content bg-base-200 shadow-md hover:shadow-none duration-200 rounded-2xl relative ${
className || "" className || ""
}`} }`}
> >
<div <div
onClick={() => link.url && window.open(link.url || "", "_blank")} onClick={() => link.url && window.open(link.url || "", "_blank")}
className="flex flex-col justify-between cursor-pointer h-full w-full gap-1 p-3" className="flex flex-col justify-between cursor-pointer h-full w-full gap-1 p-3"
> >
<div className="absolute bottom-3 right-3"> <div className="absolute bottom-3 right-3">
<LinkIcon link={link} /> <LinkIcon link={link} />
</div> </div>
<div className="flex items-baseline gap-1"> <div className="flex items-baseline gap-1">
<p className="text-sm text-neutral">{count + 1}</p> <p className="text-sm text-neutral">{count + 1}</p>
<p className="text-lg truncate w-full pr-8"> <p className="text-lg truncate w-full pr-8">
{unescapeString(link.name || link.description) || link.url} {unescapeString(link.name || link.description) || link.url}
</p> </p>
</div> </div>
{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">
{link.tags.map((e, i) => ( {link.tags.map((e, i) => (
@ -110,9 +105,9 @@ export default function LinkCard({link, count, className}: Props) {
) : ( ) : (
<p className="text-xs mt-2 p-1 font-semibold italic">No Tags</p> <p className="text-xs mt-2 p-1 font-semibold italic">No Tags</p>
)} */} )} */}
</div> </div>
<LinkActions link={link} collection={collection}/> <LinkActions link={link} collection={collection} />
</div> </div>
); );
} }