opensource/dashboard-icons
1
0
Fork 0
mirror of https://github.com/walkxcode/dashboard-icons.git synced 2025-06-28 15:30:22 +08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

feat(icons): refactor IconSearch with smoother animation

Browse Source
This commit is contained in:
Bjorn Lammers 2025-04-17 04:30:33 +02:00 committed by Thomas Camlong
parent 677f789686
commit 24cc8c1b6f
No known key found for this signature in database
GPG Key ID: A678F374F428457B
1 changed files with 62 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

58
web/src/app/icons/components/icon-search.tsx
View File

@ -11,6 +11,7 @@ import Link from "next/link"
import { usePathname, useRouter, useSearchParams } from "next/navigation"
import { useCallback, useEffect, useRef, useState } from "react"
import { useTheme } from "next-themes"
import { useInView } from "framer-motion"
export function IconSearch({ icons }: IconSearchProps) {
const searchParams = useSearchParams()
@ -133,15 +134,50 @@ export function IconSearch({ icons }: IconSearchProps) {
) : (
<div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 xl:grid-cols-8 gap-4 mt-8">
{filteredIcons.map(({ name, data }, index) => (
<IconCard key={name} name={name} data={data} getIconVariant={getIconVariant} />
))}
</div>
)}
</>
)
}
function IconCard({ name, data, getIconVariant }: {
name: string;
data: any;
getIconVariant: (name: string, data: any) => string;
}) {
const ref = useRef(null);
const isInView = useInView(ref, {
once: false,
amount: 0.2,
margin: "100px 0px"
});
const variants = {
hidden: { opacity: 0, y: 20, scale: 0.95 },
visible: {
opacity: 1,
y: 0,
scale: 1,
transition: { duration: 0.4, ease: [0.25, 0.1, 0.25, 1.0] }
},
exit: {
opacity: 0,
y: -10,
scale: 0.98,
transition: { duration: 0.3, ease: [0.25, 0.1, 0.25, 1.0] }
}
};
return (
<motion.div
key={name}
initial={{ opacity: 0, y: 15 }}
animate={{ opacity: 1, y: 0 }}
transition={{
duration: 0.5,
delay: index * 0.03,
ease: "easeOut",
}}
ref={ref}
initial="hidden"
animate={isInView ? "visible" : "hidden"}
exit="exit"
variants={variants}
className="will-change-transform"
>
<Link
prefetch={false}
@ -163,9 +199,5 @@ export function IconSearch({ icons }: IconSearchProps) {
</span>
</Link>
</motion.div>
))}
</div>
)}
</>
)
);
}