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

✨ style: change in visual

Browse Source
This commit is contained in:
RiO
2024-12-25 10:03:53 +05:30
parent ae489f4b5f
commit 1b2aaf6015
2 changed files with 27 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/developers/ContributorCard.tsx
View File

@@ -18,7 +18,7 @@ export function ContributorCard({ login, avatarUrl, contributions, profileUrl }:
<img <img
src={avatarUrl} src={avatarUrl}
alt={`${login}'s avatar`} alt={`${login}'s avatar`}
className="w-16 h-16 rounded-full" className="w-24 h-24 rounded-full"
/> />
<div> <div>
<h3 className="font-semibold text-gray-900">{login}</h3> <h3 className="font-semibold text-gray-900">{login}</h3>

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

@@ -1,7 +1,7 @@
import { motion } from 'framer-motion'; import { motion } from 'framer-motion';
import { Star, GitFork, Clock } from 'lucide-react'; import { Star, GitFork, Clock } from 'lucide-react';
import { formatDate } from '@/lib/utils'; import { formatDate } from '../../lib/utils';
import type { GithubRepo } from '@/lib/github'; import type { GithubRepo } from '../../lib/github';
interface RepoCardProps { interface RepoCardProps {
repo: GithubRepo; repo: GithubRepo;
@@ -10,47 +10,52 @@ interface RepoCardProps {
export function RepoCard({ repo }: RepoCardProps) { export function RepoCard({ repo }: RepoCardProps) {
return ( return (
<motion.div <motion.div
whileHover={{ y: -5 }} whileHover={{ y: -5, scale: 1.02 }}
className="bg-white/80 backdrop-blur-sm p-6 rounded-lg border border-gray-200" whileTap={{ scale: 0.98 }}
transition={{ type: 'spring', stiffness: 300 }}
className="bg-white/80 backdrop-blur-sm p-6 rounded-lg border border-gray-200 shadow-lg hover:shadow-xl transition-shadow duration-300"
> >
<h3 className="text-lg font-semibold text-gray-900"> <h3 className="text-xl font-semibold text-gray-900">
<a <a
href={repo.html_url} href={repo.html_url}
target="_blank" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"
className="hover:text-cornflower-blue transition-colors" className="hover:text-cornflower-blue transition-colors"
aria-label={`Visit ${repo.name} repository`}
> >
{repo.name} {repo.name}
</a> </a>
</h3> </h3>
{repo.description && ( {repo.description && (
<p className="mt-2 text-gray-600 line-clamp-2">{repo.description}</p> <p className="mt-2 text-gray-600 line-clamp-3">
{repo.description}
</p>
)} )}
<div className="mt-4 flex items-center gap-4 text-sm text-gray-500"> <div className="mt-4 flex items-center gap-6 text-sm text-gray-500">
{repo.language && ( {repo.language && (
<span className="flex items-center gap-1"> <span className="flex items-center gap-1">
<span className="w-3 h-3 rounded-full bg-cornflower-blue" /> <span className="w-3 h-3 rounded-full bg-cornflower-blue" aria-hidden="true" />
{repo.language} <span>{repo.language}</span>
</span> </span>
)} )}
<span className="flex items-center gap-1"> <span className="flex items-center gap-1">
<Star className="h-4 w-4" /> <Star className="h-5 w-5 text-yellow-500" />
{repo.stargazers_count} <span>{repo.stargazers_count}</span>
</span> </span>
<span className="flex items-center gap-1"> <span className="flex items-center gap-1">
<GitFork className="h-4 w-4" /> <GitFork className="h-5 w-5 text-gray-600" />
{repo.forks_count} <span>{repo.forks_count}</span>
</span> </span>
<span className="flex items-center gap-1"> <span className="flex items-center gap-1">
<Clock className="h-4 w-4" /> <Clock className="h-5 w-5 text-gray-600" />
{formatDate(repo.updated_at)} <span>{formatDate(repo.updated_at)}</span>
</span> </span>
</div> </div>
</motion.div> </motion.div>
); );
} }