{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "site-github-card", "type": "registry:ui", "description": "Site github-card component", "files": [ { "path": "packages/site/github-card.tsx", "content": "\"use client\";\n\nimport { useState } from \"react\";\nimport Head from \"next/head\";\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\";\nimport { Card } from \"@/components/ui/card\";\nimport { Input } from \"@/components/ui/input\";\nimport { Button } from \"@/components/ui/button\";\nimport { Icon } from \"@iconify/react\";\n\ninterface GitHubUser {\n login: string;\n name: string;\n bio: string;\n avatar_url: string;\n followers: number;\n following: number;\n public_repos: number;\n html_url: string;\n email?: string;\n twitter_username?: string;\n blog?: string;\n}\n\ninterface ContributionDay {\n date: string;\n level: number;\n count: number;\n}\n\nexport default function GitHubCard() {\n const [username, setUsername] = useState(\"\");\n const [userData, setUserData] = useState(null);\n const [loading, setLoading] = useState(false);\n const [error, setError] = useState(null);\n\n // Generate realistic contribution data with proper GitHub-like structure\n const generateContributions = (): ContributionDay[] => {\n const contributions: ContributionDay[] = [];\n const today = new Date();\n const startDate = new Date(\n today.getFullYear() - 1,\n today.getMonth(),\n today.getDate(),\n );\n\n // Start from the Sunday of the week containing startDate\n const startSunday = new Date(startDate);\n startSunday.setDate(startDate.getDate() - startDate.getDay());\n\n for (let i = 0; i < 371; i++) {\n // ~53 weeks * 7 days\n const date = new Date(startSunday);\n date.setDate(startSunday.getDate() + i);\n\n const dayOfWeek = date.getDay();\n const isWeekend = dayOfWeek === 0 || dayOfWeek === 6;\n const baseIntensity = isWeekend ? 0.2 : 0.6;\n const randomFactor = Math.random();\n const intensity = baseIntensity * randomFactor;\n\n let level = 0;\n let count = 0;\n if (intensity > 0.7) {\n level = 4;\n count = Math.floor(Math.random() * 10) + 10;\n } else if (intensity > 0.5) {\n level = 3;\n count = Math.floor(Math.random() * 8) + 5;\n } else if (intensity > 0.3) {\n level = 2;\n count = Math.floor(Math.random() * 5) + 2;\n } else if (intensity > 0.1) {\n level = 1;\n count = Math.floor(Math.random() * 3) + 1;\n }\n\n contributions.push({\n date: date.toISOString().split(\"T\")[0],\n level,\n count,\n });\n }\n\n return contributions;\n };\n\n const fetchGitHubUser = async (username: string) => {\n setLoading(true);\n setError(null);\n\n try {\n const response = await fetch(`https://api.github.com/users/${username}`);\n\n if (!response.ok) {\n if (response.status === 404) {\n throw new Error(\"User not found\");\n } else if (response.status === 403) {\n throw new Error(\"API rate limit exceeded\");\n } else {\n throw new Error(\"Failed to fetch user data\");\n }\n }\n\n const data: GitHubUser = await response.json();\n setUserData(data);\n } catch (err) {\n setError(err instanceof Error ? err.message : \"An error occurred\");\n setUserData(null);\n } finally {\n setLoading(false);\n }\n };\n\n const handleSearch = () => {\n if (username.trim()) {\n fetchGitHubUser(username.trim());\n }\n };\n\n const handleKeyPress = (e: React.KeyboardEvent) => {\n if (e.key === \"Enter\") {\n handleSearch();\n }\n };\n\n const contributions = generateContributions();\n\n const getContributionColor = (level: number) => {\n // Using CSS custom properties that work with dark mode\n switch (level) {\n case 0:\n return \"rgb(235 237 240 / 1)\"; // light mode\n case 1:\n return \"rgb(155 233 168 / 1)\";\n case 2:\n return \"rgb(64 196 99 / 1)\";\n case 3:\n return \"rgb(48 161 78 / 1)\";\n case 4:\n return \"rgb(33 110 57 / 1)\";\n default:\n return \"rgb(235 237 240 / 1)\";\n }\n };\n\n const getDarkContributionColor = (level: number) => {\n switch (level) {\n case 0:\n return \"rgb(33 33 33 / 1)\"; // dark mode\n case 1:\n return \"rgb(64 64 64 / 1)\";\n case 2:\n return \"rgb(96 96 96 / 1)\";\n case 3:\n return \"rgb(128 128 128 / 1)\";\n case 4:\n return \"rgb(198 198 198 / 1)\";\n default:\n return \"rgb(33 33 33 / 1)\";\n }\n };\n\n const formatNumber = (num: number) => {\n if (num >= 1000) {\n return (num / 1000).toFixed(1) + \"k\";\n }\n return num.toString();\n };\n\n const getMonthLabels = () => {\n const months = [];\n const today = new Date();\n for (let i = 11; i >= 0; i--) {\n const date = new Date(today.getFullYear(), today.getMonth() - i, 1);\n months.push(date.toLocaleDateString(\"en-US\", { month: \"short\" }));\n }\n return months;\n };\n\n const organizeContributionsByWeek = () => {\n const weeks: ContributionDay[][] = [];\n let currentWeek: ContributionDay[] = [];\n\n contributions.forEach((day, index) => {\n currentWeek.push(day);\n if (currentWeek.length === 7 || index === contributions.length - 1) {\n weeks.push([...currentWeek]);\n currentWeek = [];\n }\n });\n\n return weeks;\n };\n\n const shareToTwitter = () => {\n const text = `I have generated my GitHub card from DeDevs UI 🚀\\n\\nGenerate yours: ${window.location.href}\\n\\n#GitHub #DeDevsUI #Developer`;\n const url = `https://x.com/intent/tweet?text=${encodeURIComponent(text)}`;\n window.open(url, \"_blank\");\n };\n\n const shareToLinkedIn = () => {\n const text = `I have generated my GitHub card from DeDevs UI — Check out this amazing tool to showcase your GitHub profile.`;\n const url = `https://www.linkedin.com/sharing/share-offsite/?url=${encodeURIComponent(window.location.href)}&summary=${encodeURIComponent(text)}`;\n window.open(url, \"_blank\");\n };\n\n const copyToClipboard = () => {\n const text = `I have generated my GitHub card from DeDevs UI — Generate yours: ${window.location.href}`;\n navigator.clipboard.writeText(text);\n alert(\"Link copied to clipboard!\");\n };\n\n return (\n <>\n {/* Open Graph Meta Tags for Social Sharing */}\n \n \n {userData\n ? `${userData.name || userData.login} - GitHub Profile Card`\n : \"GitHub Profile Card Generator\"}\n \n \n\n {/* Open Graph Tags */}\n \n \n \n \n \n \n\n {/* Twitter Card Tags */}\n \n \n \n \n\n \n \n \n\n
\n
\n setUsername(e.target.value)}\n onKeyDown={handleKeyPress}\n className=\"bg-background text-text rounded-xl\"\n />\n \n {loading ? (\n \n ) : (\n \n )}\n \n
\n\n {error && (\n
\n {error}\n
\n )}\n\n {userData && (\n <>\n \n
\n\n
\n \n \n \n {(userData.name || userData.login).charAt(0).toUpperCase()}\n \n \n\n {/* Name and Bio */}\n
\n

\n {userData.name || userData.login}\n

\n

\n {userData.bio || \"GitHub Developer\"}\n

\n
\n\n {/* Social Icons */}\n
\n {userData.twitter_username && (\n \n \n \n )}\n \n \n \n {userData.blog && (\n \n \n \n )}\n {userData.email && (\n \n \n \n )}\n
\n\n {/* Stats */}\n
\n
\n
\n {formatNumber(userData.followers)}\n
\n
\n Followers\n
\n
\n
\n
\n {formatNumber(userData.following)}\n
\n
\n Following\n
\n
\n
\n
\n {formatNumber(userData.public_repos)}\n
\n
\n Repositories\n
\n
\n
\n\n {/* Contribution Graph */}\n
\n {/* Month labels */}\n
\n {getMonthLabels().map((month, index) => (\n \n {month}\n \n ))}\n
\n\n {/* Contribution grid - GitHub style */}\n
\n {/* Day labels */}\n
\n Mon\n Wed\n Fri\n
\n\n {/* Grid container */}\n
\n {organizeContributionsByWeek().map((week, weekIndex) => (\n
\n {week.map((day, dayIndex) => (\n \n ))}\n
\n ))}\n
\n
\n\n {/* Legend */}\n
\n Learn how we count contributions\n
\n Less\n
\n {[0, 1, 2, 3, 4].map((level) => (\n \n ))}\n
\n More\n
\n
\n
\n
\n \n\n {/* Share Section */}\n
\n
\n

\n Share GitHub Card\n

\n

\n Just generated my GitHub card from DeDevs UI — Generate yours and showcase your profile.\n

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

\n Enter a GitHub username to view their profile card\n

\n

\n Try searching for popular users like "bunsdev",\n "torvalds"\n

\n
\n )}\n
\n \n );\n}\n", "type": "registry:component" } ] }