egutierrez/linkwarden
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

many more improvements

Browse Source
This commit is contained in:
Daniel
2023-05-25 17:47:20 +03:30
parent b473716237
commit d5d052b9b2
10 changed files with 118 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/CollectionCard.tsx
+49 -40
View File
@@ -4,10 +4,11 @@
// You should have received a copy of the GNU General Public License along with this program. If not, see <https://www.gnu.org/licenses/>.
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faChevronRight } from "@fortawesome/free-solid-svg-icons";
import { faChevronRight, faUser } from "@fortawesome/free-solid-svg-icons";
import Link from "next/link";
import { ExtendedCollection } from "@/types/global";
import useLinkStore from "@/store/links";
import ImageWithFallback from "./ImageWithFallback";
export default function ({ collection }: { collection: ExtendedCollection }) {
const { links } = useLinkStore();
@@ -18,47 +19,55 @@ export default function ({ collection }: { collection: ExtendedCollection }) {
});
return (
<Link href={`/collections/${collection.id}`}>
<div className="p-5 bg-gray-100 min-h-[12rem] rounded-md border-sky-100 border-solid border flex flex-col gap-2 justify-between cursor-pointer hover:bg-gray-50 duration-100">
<div>
<div className="flex justify-between text-sky-600 items-center">
<p className="text-lg w-max font-bold">{collection.name}</p>
<FontAwesomeIcon
icon={faChevronRight}
className="w-3 h-3 text-gray-500"
/>
<div className="p-5 bg-gradient-to-tr from-sky-100 self-stretch to-gray-100 min-h-[12rem] rounded-md cursor-pointer shadow duration-100 hover:shadow-none group">
<Link href={`/collections/${collection.id}`}>
<div className="flex flex-col gap-2 justify-between h-full">
<div>
<div className="flex justify-between text-sky-600 items-center mb-2">
<p className="text-2xl w-max font-bold capitalize">
{collection.name}
</p>
<FontAwesomeIcon
icon={faChevronRight}
className="w-3 h-3 group-hover:w-5 group-hover:h-5 duration-100 text-gray-500"
/>
</div>
<p className="text-gray-500">{collection.description}</p>
</div>
<p className="text-sky-400">{collection.description}</p>
</div>
<div className="flex justify-between items-center">
<div className="text-sky-400 flex items-center w-full">
{collection.members
.map((e, i) => {
return (
<img
src={`/api/avatar/${e.userId}`}
className="h-10 w-10 shadow rounded-full border-[3px] border-sky-100 -mr-3"
alt=""
/>
);
})
.reverse()
.slice(0, 3)}
{collection.members.length - 3 > 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 - 3}
</div>
) : null}
</div>
<div className="text-right w-full">
<p className="text-sky-500 font-bold">
{links.filter((e) => e.collectionId === collection.id).length}{" "}
Links
</p>
<p className="text-sky-300 font-bold text-sm">{formattedDate}</p>
<div className="flex justify-between items-center">
<div className="text-sky-400 flex items-center w-full">
{collection.members
.map((e, i) => {
return (
<ImageWithFallback
key={i}
src={`/api/avatar/${e.userId}`}
className="h-10 w-10 shadow rounded-full border-[3px] border-sky-100 -mr-3"
>
<div className="text-white bg-sky-500 h-10 w-10 shadow rounded-full border-[3px] border-sky-100 -mr-3 flex items-center justify-center">
<FontAwesomeIcon icon={faUser} className="w-5 h-5" />
</div>
</ImageWithFallback>
);
})
.reverse()
.slice(0, 3)}
{collection.members.length - 3 > 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 - 3}
</div>
) : null}
</div>
<div className="text-right w-full">
<p className="text-sky-500 font-bold text-sm">
{links.filter((e) => e.collectionId === collection.id).length}{" "}
Links
</p>
<p className="text-gray-500 font-bold text-xs">{formattedDate}</p>
</div>
</div>
</div>
</div>
</Link>
</Link>
</div>
);
}