'use client'; import { useMemo, useState } from 'react'; import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'; import { Card } from '@/components/ui/card'; import { Input } from '@/components/ui/input'; import { Button } from '@/components/ui/button'; import { Linkedin, Mail, Search, Loader2, Share2, Globe } from 'lucide-react'; import { Icons } from '@/components/icon'; interface GitHubUser { login: string; name: string; bio: string; avatar_url: string; followers: number; following: number; public_repos: number; html_url: string; email?: string; twitter_username?: string; blog?: string; } interface ContributionDay { date: string; level: number; count: number; } const contributionColorClasses = [ 'bg-[#ebedf0] dark:bg-[#212121]', 'bg-[#9be9a8] dark:bg-[#404040]', 'bg-[#40c463] dark:bg-[#606060]', 'bg-[#30a14e] dark:bg-[#808080]', 'bg-[#216e39] dark:bg-[#c6c6c6]', ]; function generateContributions(): ContributionDay[] { const contributions: ContributionDay[] = []; const today = new Date(); const startDate = new Date(today.getFullYear() - 1, today.getMonth(), today.getDate()); const startSunday = new Date(startDate); startSunday.setDate(startDate.getDate() - startDate.getDay()); for (let i = 0; i < 371; i++) { const date = new Date(startSunday); date.setDate(startSunday.getDate() + i); const dayOfWeek = date.getDay(); const isWeekend = dayOfWeek === 0 || dayOfWeek === 6; const intensity = (isWeekend ? 0.2 : 0.6) * Math.random(); let level = 0; let count = 0; if (intensity > 0.7) { level = 4; count = Math.floor(Math.random() * 10) + 10; } else if (intensity > 0.5) { level = 3; count = Math.floor(Math.random() * 8) + 5; } else if (intensity > 0.3) { level = 2; count = Math.floor(Math.random() * 5) + 2; } else if (intensity > 0.1) { level = 1; count = Math.floor(Math.random() * 3) + 1; } contributions.push({ date: date.toISOString().split('T')[0], level, count, }); } return contributions; } function formatNumber(num: number) { if (num >= 1000) return `${(num / 1000).toFixed(1)}k`; return num.toString(); } function getMonthLabels() { const months = []; const today = new Date(); for (let i = 11; i >= 0; i--) { const date = new Date(today.getFullYear(), today.getMonth() - i, 1); months.push(date.toLocaleDateString('en-US', { month: 'short' })); } return months; } function organizeContributionsByWeek(contributions: ContributionDay[]) { const weeks: ContributionDay[][] = []; for (let index = 0; index < contributions.length; index += 7) { weeks.push(contributions.slice(index, index + 7)); } return weeks; } function shareToTwitter() { const text = `I have generated my GitHub card from Spectrum UI! 🚀\n\nGenerate yours: ${window.location.href}\n\n#GitHub #SpectrumUI #Developer`; const url = `https://twitter.com/intent/tweet?text=${encodeURIComponent(text)}`; window.open(url, '_blank'); } function shareToLinkedIn() { const text = 'I have generated my GitHub card from Spectrum UI! Check out this tool to showcase your GitHub profile.'; const url = `https://www.linkedin.com/sharing/share-offsite/?url=${encodeURIComponent(window.location.href)}&summary=${encodeURIComponent(text)}`; window.open(url, '_blank'); } function copyShareLink() { const text = `I have generated my GitHub card from Spectrum UI! Generate yours: ${window.location.href}`; navigator.clipboard.writeText(text); alert('Link copied to clipboard!'); } export default function GitHubProfileCard() { const [username, setUsername] = useState(''); const [userData, setUserData] = useState(null); const [loading, setLoading] = useState(false); const [error, setError] = useState(null); const fetchGitHubUser = async (username: string) => { setLoading(true); setError(null); try { const response = await fetch(`https://api.github.com/users/${username}`); if (!response.ok) { if (response.status === 404) { throw new Error('User not found'); } else if (response.status === 403) { throw new Error('API rate limit exceeded'); } else { throw new Error('Failed to fetch user data'); } } const data: GitHubUser = await response.json(); setUserData(data); } catch (err) { setError(err instanceof Error ? err.message : 'An error occurred'); setUserData(null); } finally { setLoading(false); } }; const handleSearch = () => { if (username.trim()) { fetchGitHubUser(username.trim()); } }; const handleKeyPress = (e: React.KeyboardEvent) => { if (e.key === 'Enter') { handleSearch(); } }; const contributions = useMemo(generateContributions, []); const contributionWeeks = useMemo( () => organizeContributionsByWeek(contributions), [contributions], ); const monthLabels = useMemo(getMonthLabels, []); return (

setUsername(e.target.value)} onKeyDown={handleKeyPress} className="bg-white dark:bg-neutral-900 border-neutral-300 dark:border-neutral-700 text-neutral-900 dark:text-white placeholder:text-neutral-500 dark:placeholder:text-neutral-400 rounded-xl" />

{error && (

{error}

)} {userData && ( <>

{(userData.name || userData.login).charAt(0).toUpperCase()} {/* Name and Bio */}

{userData.name || userData.login}

{userData.bio || 'GitHub Developer'}

{/* Social Icons */}

{userData.twitter_username && ( )} {userData.blog && ( )} {userData.email && ( )}

{/* Stats */}

{formatNumber(userData.followers)}

Followers

{formatNumber(userData.following)}

Following

{formatNumber(userData.public_repos)}

Repositories

{/* Contribution Graph */}

{/* Month labels */}

{monthLabels.map((month, index) => ( {month} ))}

{/* Contribution grid - GitHub style */}

{/* Day labels */}

Mon Wed Fri

{/* Grid container */}

{contributionWeeks.map((week) => (

{week.map((day) => (

))}

{/* Legend */}

Learn how we count contributions

Less

{[0, 1, 2, 3, 4].map((level) => (

))}

{/* Share Section */}

Share Your GitHub Card

I have generated my GitHub card from Spectrum UI! Generate yours and showcase your profile.

)} {/* Default state message */} {!userData && !loading && !error && (

Enter a GitHub username to view their profile card

Try searching for popular users like "arihantcodes", "torvalds"

)}

); }

GitHub Profile Card

Installation