bug fixed + small visual improvements + improved user experience
This commit is contained in:
daniel31x13
parent
f15e298cc3
commit
3282d5a615
|
|
@ -32,7 +32,7 @@ export default function CollectionCard({ collection, className }: Props) {
|
|||
|
||||
return (
|
||||
<div
|
||||
className={`bg-gradient-to-tr from-sky-100 dark:from-gray-800 from-10% via-gray-100 via-20% to-white dark:to-neutral-800 to-100% self-stretch min-h-[12rem] rounded-2xl shadow duration-100 hover:shadow-none group relative ${className}`}
|
||||
className={`border border-solid border-sky-100 dark:border-neutral-700 bg-gradient-to-tr from-sky-100 dark:from-gray-800 from-10% via-gray-100 via-20% to-white dark:to-neutral-800 to-100% self-stretch min-h-[12rem] rounded-2xl shadow duration-100 hover:shadow-none hover:opacity-80 group relative ${className}`}
|
||||
>
|
||||
<div
|
||||
onClick={() => setExpandDropdown(!expandDropdown)}
|
||||
|
|
|
|||
|
|
@ -19,6 +19,7 @@ import { faCalendarDays } from "@fortawesome/free-regular-svg-icons";
|
|||
import usePermissions from "@/hooks/usePermissions";
|
||||
import { toast } from "react-hot-toast";
|
||||
import isValidUrl from "@/lib/client/isValidUrl";
|
||||
import Link from "next/link";
|
||||
|
||||
type Props = {
|
||||
link: LinkIncludingShortenedCollectionAndTags;
|
||||
|
|
@ -106,7 +107,7 @@ export default function LinkCard({ link, count, className }: Props) {
|
|||
|
||||
return (
|
||||
<div
|
||||
className={`h-fit bg-gradient-to-tr from-slate-200 dark:from-neutral-800 from-10% to-gray-50 dark:to-[#303030] via-20% shadow hover:shadow-none cursor-pointer duration-100 rounded-2xl relative group ${className}`}
|
||||
className={`h-fit border border-solid border-sky-100 dark:border-neutral-700 bg-gradient-to-tr from-slate-200 dark:from-neutral-800 from-10% to-gray-50 dark:to-[#303030] via-20% shadow hover:shadow-none duration-100 rounded-2xl relative group ${className}`}
|
||||
>
|
||||
{(permissions === true ||
|
||||
permissions?.canUpdate ||
|
||||
|
|
@ -136,7 +137,7 @@ export default function LinkCard({ link, count, className }: Props) {
|
|||
active: link,
|
||||
});
|
||||
}}
|
||||
className="flex items-start gap-5 sm:gap-10 h-full w-full p-5"
|
||||
className="flex items-start cursor-pointer gap-5 sm:gap-10 h-full w-full p-5"
|
||||
>
|
||||
{url && (
|
||||
<Image
|
||||
|
|
@ -163,22 +164,33 @@ export default function LinkCard({ link, count, className }: Props) {
|
|||
{link.name || link.description}
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex gap-3 items-center my-3">
|
||||
<div className="flex items-center gap-1 w-full pr-20">
|
||||
<FontAwesomeIcon
|
||||
icon={faFolder}
|
||||
className="w-4 h-4 mt-1 drop-shadow"
|
||||
style={{ color: collection?.color }}
|
||||
/>
|
||||
<p className="text-black dark:text-white truncate capitalize">
|
||||
{collection?.name}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-1 w-full pr-20 text-gray-500 dark:text-gray-300">
|
||||
<Link
|
||||
href={`/collections/${link.collection.id}`}
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
}}
|
||||
className="flex items-center gap-1 max-w-full w-fit my-3 hover:opacity-70 duration-100"
|
||||
>
|
||||
<FontAwesomeIcon
|
||||
icon={faFolder}
|
||||
className="w-4 h-4 mt-1 drop-shadow"
|
||||
style={{ color: collection?.color }}
|
||||
/>
|
||||
<p className="text-black dark:text-white truncate capitalize w-full">
|
||||
{collection?.name}
|
||||
</p>
|
||||
</Link>
|
||||
<Link
|
||||
href={link.url}
|
||||
target="_blank"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
}}
|
||||
className="flex items-center gap-1 max-w-full w-fit text-gray-500 dark:text-gray-300 hover:opacity-70 duration-100"
|
||||
>
|
||||
<FontAwesomeIcon icon={faLink} className="mt-1 w-4 h-4" />
|
||||
<p className="truncate w-full">{shortendURL}</p>
|
||||
</div>
|
||||
</Link>
|
||||
<div className="flex items-center gap-1 text-gray-500 dark:text-gray-300">
|
||||
<FontAwesomeIcon icon={faCalendarDays} className="w-4 h-4" />
|
||||
<p>{formattedDate}</p>
|
||||
|
|
|
|||
|
|
@ -166,7 +166,6 @@ export default function LinkDetails({ link, isOwnerOrMod }: Props) {
|
|||
<Link
|
||||
href={link.url}
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
className={`${
|
||||
link.name ? "text-sm" : "text-xl"
|
||||
} text-gray-500 dark:text-gray-300 break-all hover:underline cursor-pointer w-fit`}
|
||||
|
|
|
|||
|
|
@ -26,7 +26,7 @@ export default function LinkCard({ link, count }: Props) {
|
|||
|
||||
return (
|
||||
<a href={link.url} target="_blank" rel="noreferrer" className="rounded-3xl">
|
||||
<div className="bg-gradient-to-tr from-slate-200 from-10% to-gray-50 via-20% shadow-md sm:hover:shadow-none duration-100 rounded-3xl cursor-pointer p-5 flex items-start relative gap-5 sm:gap-10 group/item">
|
||||
<div className="border border-solid border-sky-100 bg-gradient-to-tr from-slate-200 from-10% to-gray-50 via-20% shadow-md sm:hover:shadow-none duration-100 rounded-3xl cursor-pointer p-5 flex items-start relative gap-5 sm:gap-10 group/item">
|
||||
{url && (
|
||||
<>
|
||||
<Image
|
||||
|
|
|
|||
|
|
@ -34,6 +34,7 @@
|
|||
"csstype": "^3.1.2",
|
||||
"eslint": "8.46.0",
|
||||
"eslint-config-next": "13.4.9",
|
||||
"framer-motion": "^10.16.4",
|
||||
"jsdom": "^22.1.0",
|
||||
"next": "13.4.12",
|
||||
"next-auth": "^4.22.1",
|
||||
|
|
|
|||
|
|
@ -50,7 +50,7 @@ export default function Index() {
|
|||
return (
|
||||
<MainLayout>
|
||||
<div className="p-5 flex flex-col gap-5 w-full">
|
||||
<div className="bg-gradient-to-tr from-sky-100 dark:from-gray-800 from-10% via-gray-100 via-20% to-white dark:to-neutral-800 to-100% rounded-2xl shadow min-h-[10rem] p-5 flex gap-5 flex-col justify-between">
|
||||
<div className="border border-solid border-sky-100 dark:border-neutral-700 bg-gradient-to-tr from-sky-100 dark:from-gray-800 from-10% via-gray-100 via-20% to-white dark:to-neutral-800 to-100% rounded-2xl shadow min-h-[10rem] p-5 flex gap-5 flex-col justify-between">
|
||||
<div className="flex flex-col sm:flex-row gap-3 justify-between items-center sm:items-start">
|
||||
{activeCollection && (
|
||||
<div className="flex gap-3 items-center">
|
||||
|
|
|
|||
|
|
@ -4,10 +4,25 @@ import getPublicCollectionData from "@/lib/client/getPublicCollectionData";
|
|||
import { PublicCollectionIncludingLinks } from "@/types/global";
|
||||
import { useRouter } from "next/router";
|
||||
import React, { useEffect, useState } from "react";
|
||||
import { motion, Variants } from "framer-motion";
|
||||
|
||||
const cardVariants: Variants = {
|
||||
offscreen: {
|
||||
y: 50,
|
||||
opacity: 0,
|
||||
},
|
||||
onscreen: {
|
||||
y: 0,
|
||||
opacity: 1,
|
||||
transition: {
|
||||
duration: 0.4,
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export default function PublicCollections() {
|
||||
const router = useRouter();
|
||||
const hasReachedBottom = useDetectPageBottom();
|
||||
const { reachedBottom, setReachedBottom } = useDetectPageBottom();
|
||||
|
||||
const [data, setData] = useState<PublicCollectionIncludingLinks>();
|
||||
|
||||
|
|
@ -33,19 +48,21 @@ export default function PublicCollections() {
|
|||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (hasReachedBottom && router.query.id) {
|
||||
if (reachedBottom && router.query.id) {
|
||||
getPublicCollectionData(
|
||||
Number(router.query.id),
|
||||
data as PublicCollectionIncludingLinks,
|
||||
setData
|
||||
);
|
||||
}
|
||||
}, [hasReachedBottom]);
|
||||
|
||||
setReachedBottom(false);
|
||||
}, [reachedBottom]);
|
||||
|
||||
return data ? (
|
||||
<div className="max-w-4xl mx-auto p-5 bg">
|
||||
<div
|
||||
className={`text-center bg-gradient-to-tr from-sky-100 from-10% via-gray-100 via-20% rounded-3xl shadow-lg p-5`}
|
||||
className={`border border-solid border-sky-100 text-center bg-gradient-to-tr from-sky-100 from-10% via-gray-100 via-20% rounded-3xl shadow-lg p-5`}
|
||||
>
|
||||
<p className="text-5xl text-black mb-5 capitalize">{data.name}</p>
|
||||
|
||||
|
|
@ -59,7 +76,18 @@ export default function PublicCollections() {
|
|||
|
||||
<div className="flex flex-col gap-5 my-8">
|
||||
{data?.links?.map((e, i) => {
|
||||
return <LinkCard key={i} link={e} count={i} />;
|
||||
return (
|
||||
<motion.div
|
||||
key={i}
|
||||
initial="offscreen"
|
||||
whileInView="onscreen"
|
||||
viewport={{ once: true, amount: 0.8 }}
|
||||
>
|
||||
<motion.div variants={cardVariants}>
|
||||
<LinkCard link={e} count={i} />
|
||||
</motion.div>
|
||||
</motion.div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@
|
|||
}
|
||||
|
||||
::selection {
|
||||
background-color: #0ea5e9;
|
||||
background-color: #0ea4e93c;
|
||||
color: white;
|
||||
}
|
||||
|
||||
|
|
|
|||
21
yarn.lock
21
yarn.lock
|
|
@ -663,6 +663,18 @@
|
|||
resolved "https://registry.yarnpkg.com/@emotion/hash/-/hash-0.9.0.tgz#c5153d50401ee3c027a57a177bc269b16d889cb7"
|
||||
integrity sha512-14FtKiHhy2QoPIzdTcvh//8OyBlknNs2nXRwIhG904opCby3l+9Xaf/wuPvICBF0rc1ZCNBd3nKe9cd2mecVkQ==
|
||||
|
||||
"@emotion/is-prop-valid@^0.8.2":
|
||||
version "0.8.8"
|
||||
resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz#db28b1c4368a259b60a97311d6a952d4fd01ac1a"
|
||||
integrity sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA==
|
||||
dependencies:
|
||||
"@emotion/memoize" "0.7.4"
|
||||
|
||||
"@emotion/memoize@0.7.4":
|
||||
version "0.7.4"
|
||||
resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.7.4.tgz#19bf0f5af19149111c40d98bb0cf82119f5d9eeb"
|
||||
integrity sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==
|
||||
|
||||
"@emotion/memoize@^0.8.0":
|
||||
version "0.8.0"
|
||||
resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.8.0.tgz#f580f9beb67176fa57aae70b08ed510e1b18980f"
|
||||
|
|
@ -2738,6 +2750,15 @@ fraction.js@^4.2.0:
|
|||
resolved "https://registry.yarnpkg.com/fraction.js/-/fraction.js-4.2.0.tgz#448e5109a313a3527f5a3ab2119ec4cf0e0e2950"
|
||||
integrity sha512-MhLuK+2gUcnZe8ZHlaaINnQLl0xRIGRfcGk2yl8xoQAfHrSsL3rYu6FCmBdkdbhc9EPlwyGHewaRsvwRMJtAlA==
|
||||
|
||||
framer-motion@^10.16.4:
|
||||
version "10.16.4"
|
||||
resolved "https://registry.yarnpkg.com/framer-motion/-/framer-motion-10.16.4.tgz#30279ef5499b8d85db3a298ee25c83429933e9f8"
|
||||
integrity sha512-p9V9nGomS3m6/CALXqv6nFGMuFOxbWsmaOrdmhyQimMIlLl3LC7h7l86wge/Js/8cRu5ktutS/zlzgR7eBOtFA==
|
||||
dependencies:
|
||||
tslib "^2.4.0"
|
||||
optionalDependencies:
|
||||
"@emotion/is-prop-valid" "^0.8.2"
|
||||
|
||||
fs-constants@^1.0.0:
|
||||
version "1.0.0"
|
||||
resolved "https://registry.yarnpkg.com/fs-constants/-/fs-constants-1.0.0.tgz#6be0de9be998ce16af8afc24497b9ee9b7ccd9ad"
|
||||
|
|
|
|||
Ŝarĝante…
Reference in New Issue