WIP
This commit is contained in:
Daniel
@@ -10,11 +10,12 @@ import CollectionModal from "@/components/Modal/Collection";
|
||||
import ProfilePhoto from "./ProfilePhoto";
|
||||
import { faCalendarDays } from "@fortawesome/free-regular-svg-icons";
|
||||
|
||||
export default function CollectionCard({
|
||||
collection,
|
||||
}: {
|
||||
type Props = {
|
||||
collection: CollectionIncludingMembers;
|
||||
}) {
|
||||
className?: string;
|
||||
};
|
||||
|
||||
export default function CollectionCard({ collection, className }: Props) {
|
||||
const { links } = useLinkStore();
|
||||
const formattedDate = new Date(collection.createdAt as string).toLocaleString(
|
||||
"en-US",
|
||||
@@ -43,7 +44,9 @@ export default function CollectionCard({
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="bg-gradient-to-tr from-sky-100 from-10% via-gray-100 via-20% self-stretch min-h-[12rem] rounded-2xl shadow duration-100 hover:shadow-none group relative">
|
||||
<div
|
||||
className={`bg-gradient-to-tr from-sky-100 from-10% via-gray-100 via-20% to-white to-100% self-stretch min-h-[12rem] rounded-2xl shadow duration-100 hover:shadow-none group relative ${className}`}
|
||||
>
|
||||
<div
|
||||
onClick={() => setExpandDropdown(!expandDropdown)}
|
||||
id={"expand-dropdown" + collection.id}
|
||||
@@ -55,43 +58,41 @@ export default function CollectionCard({
|
||||
className="w-5 h-5 text-gray-500"
|
||||
/>
|
||||
</div>
|
||||
<Link href={`/collections/${collection.id}`}>
|
||||
<div className="flex flex-col gap-2 justify-between h-full select-none p-5 cursor-pointer">
|
||||
<p className="text-2xl font-bold capitalize bg-gradient-to-tr from-sky-500 to-slate-400 bg-clip-text text-transparent break-words w-4/5">
|
||||
{collection.name}
|
||||
</p>
|
||||
<div className="flex justify-between items-center">
|
||||
<div className="text-sky-400 flex items-center w-full">
|
||||
{collection.members
|
||||
.sort((a, b) => (a.userId as number) - (b.userId as number))
|
||||
.map((e, i) => {
|
||||
return (
|
||||
<ProfilePhoto
|
||||
key={i}
|
||||
src={`/api/avatar/${e.userId}`}
|
||||
className="-mr-3"
|
||||
/>
|
||||
);
|
||||
})
|
||||
.slice(0, 4)}
|
||||
{collection.members.length - 4 > 0 ? (
|
||||
<div className="h-10 w-10 text-white flex items-center justify-center rounded-full border-[3px] bg-sky-500 border-sky-100 -mr-3">
|
||||
+{collection.members.length - 4}
|
||||
</div>
|
||||
) : null}
|
||||
<Link
|
||||
href={`/collections/${collection.id}`}
|
||||
className="flex flex-col gap-2 justify-between min-h-[12rem] h-full select-none p-5"
|
||||
>
|
||||
<p className="text-2xl font-bold capitalize text-sky-500 break-words line-clamp-3 w-4/5">
|
||||
{collection.name}
|
||||
</p>
|
||||
<div className="flex justify-between items-center">
|
||||
<div className="text-sky-400 flex items-center w-full">
|
||||
{collection.members
|
||||
.sort((a, b) => (a.userId as number) - (b.userId as number))
|
||||
.map((e, i) => {
|
||||
return (
|
||||
<ProfilePhoto
|
||||
key={i}
|
||||
src={`/api/avatar/${e.userId}`}
|
||||
className="-mr-3"
|
||||
/>
|
||||
);
|
||||
})
|
||||
.slice(0, 4)}
|
||||
{collection.members.length - 4 > 0 ? (
|
||||
<div className="h-10 w-10 text-white flex items-center justify-center rounded-full border-[3px] bg-sky-500 border-sky-100 -mr-3">
|
||||
+{collection.members.length - 4}
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
<div className="text-right w-40">
|
||||
<div className="text-sky-500 font-bold text-sm flex justify-end gap-1 items-center">
|
||||
<FontAwesomeIcon icon={faLink} className="w-5 h-5 text-sky-600" />
|
||||
{links.filter((e) => e.collectionId === collection.id).length}
|
||||
</div>
|
||||
<div className="text-right w-40">
|
||||
<div className="text-sky-500 font-bold text-sm flex justify-end gap-1 items-center">
|
||||
<FontAwesomeIcon
|
||||
icon={faLink}
|
||||
className="w-5 h-5 text-sky-600"
|
||||
/>
|
||||
{links.filter((e) => e.collectionId === collection.id).length}
|
||||
</div>
|
||||
<div className="flex items-center justify-end gap-1 text-gray-600">
|
||||
<FontAwesomeIcon icon={faCalendarDays} className="w-4 h-4" />
|
||||
<p className="font-bold text-xs">{formattedDate}</p>
|
||||
</div>
|
||||
<div className="flex items-center justify-end gap-1 text-gray-600">
|
||||
<FontAwesomeIcon icon={faCalendarDays} className="w-4 h-4" />
|
||||
<p className="font-bold text-xs">{formattedDate}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
+152
-141
@@ -21,9 +21,10 @@ import useCollectionStore from "@/store/collections";
|
||||
type Props = {
|
||||
link: LinkIncludingCollectionAndTags;
|
||||
count: number;
|
||||
className?: string;
|
||||
};
|
||||
|
||||
export default function LinkCard({ link, count }: Props) {
|
||||
export default function LinkCard({ link, count, className }: Props) {
|
||||
const [expandDropdown, setExpandDropdown] = useState(false);
|
||||
const [editModal, setEditModal] = useState(false);
|
||||
|
||||
@@ -60,159 +61,169 @@ export default function LinkCard({ link, count }: Props) {
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="bg-gradient-to-tr from-slate-200 from-10% to-gray-50 via-20% shadow-sm p-5 rounded-2xl flex items-start relative gap-5 sm:gap-10 group/item">
|
||||
{editModal ? (
|
||||
<Modal toggleModal={toggleEditModal}>
|
||||
<LinkModal
|
||||
toggleLinkModal={toggleEditModal}
|
||||
activeLink={link}
|
||||
method="UPDATE"
|
||||
/>
|
||||
</Modal>
|
||||
) : null}
|
||||
<div
|
||||
className={`bg-gradient-to-tr from-slate-200 from-10% to-gray-50 via-20% shadow-sm p-5 rounded-2xl relative group/item ${className}`}
|
||||
>
|
||||
<div className="flex items-start gap-5 sm:gap-10 h-full w-full">
|
||||
{editModal ? (
|
||||
<Modal toggleModal={toggleEditModal}>
|
||||
<LinkModal
|
||||
toggleLinkModal={toggleEditModal}
|
||||
activeLink={link}
|
||||
method="UPDATE"
|
||||
/>
|
||||
</Modal>
|
||||
) : null}
|
||||
|
||||
<Image
|
||||
src={`https://t2.gstatic.com/faviconV2?client=SOCIAL&type=FAVICON&fallback_opts=TYPE,SIZE,URL&url=${url.origin}&size=32`}
|
||||
width={42}
|
||||
height={42}
|
||||
alt=""
|
||||
className="select-none mt-3 z-10 rounded-full shadow border-[3px] border-white bg-white"
|
||||
draggable="false"
|
||||
onError={(e) => {
|
||||
const target = e.target as HTMLElement;
|
||||
target.style.opacity = "0";
|
||||
}}
|
||||
/>
|
||||
<Image
|
||||
src={`https://t2.gstatic.com/faviconV2?client=SOCIAL&type=FAVICON&fallback_opts=TYPE,SIZE,URL&url=${url.origin}&size=32`}
|
||||
width={80}
|
||||
height={80}
|
||||
alt=""
|
||||
className="blur-sm absolute left-2 opacity-40 select-none hidden sm:block"
|
||||
draggable="false"
|
||||
onError={(e) => {
|
||||
const target = e.target as HTMLElement;
|
||||
target.style.opacity = "0";
|
||||
}}
|
||||
/>
|
||||
<div className="flex justify-between gap-5 w-full h-full z-0">
|
||||
<div className="flex flex-col justify-between">
|
||||
<div className="flex items-baseline gap-1">
|
||||
<p className="text-sm text-sky-400 font-bold">{count + 1}.</p>
|
||||
<p className="text-lg text-sky-500 font-bold">{link.name}</p>
|
||||
</div>
|
||||
<p className="text-gray-500 text-sm font-medium">{link.title}</p>
|
||||
<div className="flex gap-3 items-center flex-wrap my-3">
|
||||
<Link href={`/collections/${link.collection.id}`}>
|
||||
<div className="flex items-center gap-1 cursor-pointer hover:opacity-60 duration-100">
|
||||
<FontAwesomeIcon
|
||||
icon={faFolder}
|
||||
className="w-4 h-4 mt-1 drop-shadow"
|
||||
style={{ color: collection?.color }}
|
||||
/>
|
||||
<p className="text-sky-900">{collection?.name}</p>
|
||||
</div>
|
||||
</Link>
|
||||
|
||||
<div className="flex gap-1 items-center flex-wrap mt-1">
|
||||
{link.tags.map((e, i) => (
|
||||
<Link key={i} href={`/tags/${e.id}`}>
|
||||
<p className="px-2 py-1 bg-sky-200 text-sky-700 text-xs rounded-3xl cursor-pointer hover:opacity-60 duration-100">
|
||||
{e.name}
|
||||
<Image
|
||||
src={`https://t2.gstatic.com/faviconV2?client=SOCIAL&type=FAVICON&fallback_opts=TYPE,SIZE,URL&url=${url.origin}&size=32`}
|
||||
width={42}
|
||||
height={42}
|
||||
alt=""
|
||||
className="select-none mt-3 z-10 rounded-full shadow border-[3px] border-white bg-white"
|
||||
draggable="false"
|
||||
onError={(e) => {
|
||||
const target = e.target as HTMLElement;
|
||||
target.style.opacity = "0";
|
||||
}}
|
||||
/>
|
||||
<Image
|
||||
src={`https://t2.gstatic.com/faviconV2?client=SOCIAL&type=FAVICON&fallback_opts=TYPE,SIZE,URL&url=${url.origin}&size=32`}
|
||||
width={80}
|
||||
height={80}
|
||||
alt=""
|
||||
className="blur-sm absolute left-2 opacity-40 select-none hidden sm:block"
|
||||
draggable="false"
|
||||
onError={(e) => {
|
||||
const target = e.target as HTMLElement;
|
||||
target.style.opacity = "0";
|
||||
}}
|
||||
/>
|
||||
<div className="flex justify-between gap-5 w-full h-full z-0">
|
||||
<div className="flex flex-col justify-between w-full">
|
||||
<div className="flex items-baseline gap-1">
|
||||
<p className="text-sm text-sky-400 font-bold">{count + 1}.</p>
|
||||
<p className="text-lg text-sky-500 font-bold truncate max-w-[12rem]">
|
||||
{link.name}
|
||||
</p>
|
||||
</div>
|
||||
<p className="text-gray-500 text-sm font-medium line-clamp-3 w-4/5">
|
||||
{link.title}
|
||||
</p>
|
||||
<div className="flex gap-3 items-center flex-wrap my-3">
|
||||
<Link href={`/collections/${link.collection.id}`}>
|
||||
<div className="flex items-center gap-1 cursor-pointer hover:opacity-60 duration-100">
|
||||
<FontAwesomeIcon
|
||||
icon={faFolder}
|
||||
className="w-4 h-4 mt-1 drop-shadow"
|
||||
style={{ color: collection?.color }}
|
||||
/>
|
||||
<p className="text-sky-900 truncate max-w-[10rem]">
|
||||
{collection?.name}
|
||||
</p>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex gap-2 items-center flex-wrap">
|
||||
<p className="text-gray-500">{formattedDate}</p>
|
||||
<a
|
||||
href={link.url}
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
className="group/url"
|
||||
>
|
||||
<div className="text-sky-400 font-bold flex items-center gap-1">
|
||||
<p>{url.host}</p>
|
||||
<FontAwesomeIcon
|
||||
icon={faArrowUpRightFromSquare}
|
||||
className="w-3 opacity-0 group-hover/url:opacity-100 duration-75"
|
||||
/>
|
||||
</div>
|
||||
</Link>
|
||||
|
||||
<div className="flex gap-1 items-center flex-wrap mt-1">
|
||||
{link.tags.map((e, i) => (
|
||||
<Link key={i} href={`/tags/${e.id}`}>
|
||||
<p className="px-2 py-1 bg-sky-200 text-sky-700 text-xs rounded-3xl cursor-pointer hover:opacity-60 duration-100 truncate max-w-[10rem]">
|
||||
{e.name}
|
||||
</p>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col justify-between items-end relative">
|
||||
<div
|
||||
onClick={() => setExpandDropdown(!expandDropdown)}
|
||||
id={"expand-dropdown" + link.id}
|
||||
className="text-gray-500 inline-flex rounded-md cursor-pointer hover:bg-slate-200 duration-100 p-1"
|
||||
>
|
||||
<FontAwesomeIcon
|
||||
icon={faEllipsis}
|
||||
title="More"
|
||||
className="w-5 h-5"
|
||||
id={"expand-dropdown" + link.id}
|
||||
/>
|
||||
</div>
|
||||
<div className="relative">
|
||||
<div className="flex flex-col items-end justify-center gap-1">
|
||||
</div>
|
||||
<div className="flex gap-2 items-center flex-wrap">
|
||||
<p className="text-gray-500">{formattedDate}</p>
|
||||
<a
|
||||
href={`/api/archives/${link.collectionId}/${encodeURIComponent(
|
||||
link.screenshotPath
|
||||
)}`}
|
||||
href={link.url}
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
title="Screenshot"
|
||||
className="group/url"
|
||||
>
|
||||
<FontAwesomeIcon
|
||||
icon={faFileImage}
|
||||
className="w-5 h-5 text-sky-600 cursor-pointer hover:text-sky-500 duration-100"
|
||||
/>
|
||||
</a>
|
||||
<a
|
||||
href={`/api/archives/${link.collectionId}/${encodeURIComponent(
|
||||
link.pdfPath
|
||||
)}`}
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
title="PDF"
|
||||
>
|
||||
<FontAwesomeIcon
|
||||
icon={faFilePdf}
|
||||
className="w-5 h-5 text-sky-600 cursor-pointer hover:text-sky-500 duration-100"
|
||||
/>
|
||||
<div className="text-sky-400 font-bold flex items-center gap-1">
|
||||
<p className="truncate w-40">{url.host}</p>
|
||||
<FontAwesomeIcon
|
||||
icon={faArrowUpRightFromSquare}
|
||||
className="w-3 opacity-0 group-hover/url:opacity-100 duration-75"
|
||||
/>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{expandDropdown ? (
|
||||
<Dropdown
|
||||
items={[
|
||||
{
|
||||
name: "Edit",
|
||||
onClick: () => {
|
||||
setEditModal(true);
|
||||
setExpandDropdown(false);
|
||||
<div className="flex flex-col justify-between items-end relative">
|
||||
<div
|
||||
onClick={() => setExpandDropdown(!expandDropdown)}
|
||||
id={"expand-dropdown" + link.id}
|
||||
className="text-gray-500 inline-flex rounded-md cursor-pointer hover:bg-slate-200 duration-100 p-1"
|
||||
>
|
||||
<FontAwesomeIcon
|
||||
icon={faEllipsis}
|
||||
title="More"
|
||||
className="w-5 h-5"
|
||||
id={"expand-dropdown" + link.id}
|
||||
/>
|
||||
</div>
|
||||
<div className="relative">
|
||||
<div className="flex flex-col items-end justify-center gap-1">
|
||||
<a
|
||||
href={`/api/archives/${
|
||||
link.collectionId
|
||||
}/${encodeURIComponent(link.screenshotPath)}`}
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
title="Screenshot"
|
||||
>
|
||||
<FontAwesomeIcon
|
||||
icon={faFileImage}
|
||||
className="w-5 h-5 text-sky-600 cursor-pointer hover:text-sky-500 duration-100"
|
||||
/>
|
||||
</a>
|
||||
<a
|
||||
href={`/api/archives/${
|
||||
link.collectionId
|
||||
}/${encodeURIComponent(link.pdfPath)}`}
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
title="PDF"
|
||||
>
|
||||
<FontAwesomeIcon
|
||||
icon={faFilePdf}
|
||||
className="w-5 h-5 text-sky-600 cursor-pointer hover:text-sky-500 duration-100"
|
||||
/>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{expandDropdown ? (
|
||||
<Dropdown
|
||||
items={[
|
||||
{
|
||||
name: "Edit",
|
||||
onClick: () => {
|
||||
setEditModal(true);
|
||||
setExpandDropdown(false);
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "Delete",
|
||||
onClick: () => {
|
||||
removeLink(link);
|
||||
setExpandDropdown(false);
|
||||
{
|
||||
name: "Delete",
|
||||
onClick: () => {
|
||||
removeLink(link);
|
||||
setExpandDropdown(false);
|
||||
},
|
||||
},
|
||||
},
|
||||
]}
|
||||
onClickOutside={(e: Event) => {
|
||||
const target = e.target as HTMLInputElement;
|
||||
if (target.id !== "expand-dropdown" + link.id)
|
||||
setExpandDropdown(false);
|
||||
}}
|
||||
className="absolute top-8 right-0 w-36"
|
||||
/>
|
||||
) : null}
|
||||
]}
|
||||
onClickOutside={(e: Event) => {
|
||||
const target = e.target as HTMLInputElement;
|
||||
if (target.id !== "expand-dropdown" + link.id)
|
||||
setExpandDropdown(false);
|
||||
}}
|
||||
className="absolute top-8 right-0 w-36"
|
||||
/>
|
||||
) : null}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -25,7 +25,6 @@ export default function ProfileSettings({
|
||||
const [profileStatus, setProfileStatus] = useState(true);
|
||||
|
||||
const handleProfileStatus = (e: boolean) => {
|
||||
console.log(e);
|
||||
setProfileStatus(!e);
|
||||
};
|
||||
|
||||
@@ -60,10 +59,6 @@ export default function ProfileSettings({
|
||||
setUser({ ...user, oldPassword: undefined, newPassword: undefined });
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
console.log(user.profilePic);
|
||||
}, [user.profilePic]);
|
||||
|
||||
const submit = async () => {
|
||||
const response = await updateAccount({
|
||||
...user,
|
||||
|
||||
+14
-14
@@ -74,20 +74,6 @@ export default function Sidebar({ className }: { className?: string }) {
|
||||
</div>
|
||||
</Link>
|
||||
|
||||
<Link href="/collections">
|
||||
<div
|
||||
className={`${
|
||||
active === "/collections" ? "bg-sky-200" : "hover:bg-slate-200"
|
||||
} outline-sky-100 outline-1 duration-100 py-1 px-2 rounded-md cursor-pointer flex items-center gap-2`}
|
||||
>
|
||||
<FontAwesomeIcon
|
||||
icon={faBox}
|
||||
className={`w-6 h-6 drop-shadow text-sky-500`}
|
||||
/>
|
||||
<p className="text-sky-600">All Collections</p>
|
||||
</div>
|
||||
</Link>
|
||||
|
||||
<Link href="/links">
|
||||
<div
|
||||
className={`${
|
||||
@@ -103,6 +89,20 @@ export default function Sidebar({ className }: { className?: string }) {
|
||||
<p className="text-sky-600">All Links</p>
|
||||
</div>
|
||||
</Link>
|
||||
|
||||
<Link href="/collections">
|
||||
<div
|
||||
className={`${
|
||||
active === "/collections" ? "bg-sky-200" : "hover:bg-slate-200"
|
||||
} outline-sky-100 outline-1 duration-100 py-1 px-2 rounded-md cursor-pointer flex items-center gap-2`}
|
||||
>
|
||||
<FontAwesomeIcon
|
||||
icon={faBox}
|
||||
className={`w-6 h-6 drop-shadow text-sky-500`}
|
||||
/>
|
||||
<p className="text-sky-600">All Collections</p>
|
||||
</div>
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<Disclosure defaultOpen={collectionDisclosure}>
|
||||
|
||||
Reference in New Issue
Block a user