Snigdha-OS/Snigdha-OS.github.io
2
0
Fork 0
mirror of https://github.com/Snigdha-OS/Snigdha-OS.github.io.git synced 2025-09-06 04:35:18 +02:00
Code Issues Actions Packages Projects Releases Wiki Activity

🔧 build: smooth animation

Browse Source
This commit is contained in:
eshanized
2025-01-07 02:38:54 +05:30
parent 9719cae1e0
commit d88c696545
1 changed files with 9 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
src/components/developers/RepoCard.tsx
View File

@@ -10,6 +10,8 @@ interface RepoCardProps {
export function RepoCard({ repo }: RepoCardProps) { export function RepoCard({ repo }: RepoCardProps) {
return ( return (
<motion.div <motion.div
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
whileHover={{ y: -5, scale: 1.02 }} whileHover={{ y: -5, scale: 1.02 }}
whileTap={{ scale: 0.98 }} whileTap={{ scale: 0.98 }}
transition={{ type: 'spring', stiffness: 300 }} transition={{ type: 'spring', stiffness: 300 }}
@@ -41,21 +43,21 @@ export function RepoCard({ repo }: RepoCardProps) {
</span> </span>
)} )}
<span className="flex items-center gap-1"> <motion.span className="flex items-center gap-1" whileHover={{ scale: 1.1 }}>
<Star className="h-5 w-5 text-yellow-500" /> <Star className="h-5 w-5 text-yellow-500" />
<span>{repo.stargazers_count}</span> <span>{repo.stargazers_count}</span>
</span> </motion.span>
<span className="flex items-center gap-1"> <motion.span className="flex items-center gap-1" whileHover={{ scale: 1.1 }}>
<GitFork className="h-5 w-5 text-gray-600" /> <GitFork className="h-5 w-5 text-gray-600" />
<span>{repo.forks_count}</span> <span>{repo.forks_count}</span>
</span> </motion.span>
<span className="flex items-center gap-1"> <motion.span className="flex items-center gap-1" whileHover={{ scale: 1.1 }}>
<Clock className="h-5 w-5 text-gray-600" /> <Clock className="h-5 w-5 text-gray-600" />
<span>{formatDate(repo.updated_at)}</span> <span>{formatDate(repo.updated_at)}</span>
</span> </motion.span>
</div> </div>
</motion.div> </motion.div>
); );
} }