\n);\n\nconst ErrorMessage: React.FC<{ message: string }> = ({ message }) => (\n

\n ❌\n {message}\n

\n);\n\nconst UserProfileCard: React.FC<{ user: GitHubUser }> = ({ user }) => (\n

\n \n \n \n \n

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

@{user.login}

\n {user.bio && (\n

{user.bio}

\n )}\n

\n {user.location && (\n \n 📍 {user.location}\n \n )}\n {user.company && (\n \n 🏢 {user.company}\n \n )}\n {user.blog && (\n \n 🔗 {user.blog}\n \n )}\n {user.twitter_username && (\n \n 🐦 @{user.twitter_username}\n \n )}\n {user.email && (\n \n ✉️ {user.email}\n \n )}\n

\n Joined GitHub on {formatDate(user.created_at)}\n •\n Last updated {formatDate(user.updated_at)}\n •\n User ID: {user.id}\n

\n);\n\nconst StatsGrid: React.FC<{ user: GitHubUser }> = ({ user }) => (\n

\n {[\n { label: 'Followers', value: user.followers, icon: '👥' },\n { label: 'Following', value: user.following, icon: '👤' },\n { label: 'Public Repos', value: user.public_repos, icon: '📚' },\n { label: 'Public Gists', value: user.public_gists, icon: '📝' }\n ].map((stat) => (\n

{stat.icon}

\n {stat.value.toLocaleString()}\n

{stat.label}

\n ))}\n

\n);\n\nconst RecentRepos: React.FC<{ repos: GitHubRepo[] }> = ({ repos }) => (\n

\n 📚 Recent Repositories\n

\n {repos.slice(0, 5).map((repo) => (\n

\n \n {repo.name}\n \n

\n \n ⭐ {repo.stargazers_count}\n \n \n 🍴 {repo.forks_count}\n \n

\n {repo.description && (\n

{repo.description}

\n )}\n

\n {repo.language && (\n \n \n {repo.language}\n \n )}\n {repo.topics.length > 0 && (\n

\n {repo.topics.slice(0, 3).map((topic) => (\n \n {topic}\n \n ))}\n

\n )}\n

\n \n Updated {formatDate(repo.updated_at)}\n \n

\n ))}\n

\n);\n\nconst RecentActivity: React.FC<{ events: GitHubEvent[] }> = ({ events }) => (\n

\n ⚡ Recent Activity\n

\n {events.slice(0, 8).map((event) => (\n

\n {event.type === 'PushEvent' && '📝'}\n {event.type === 'CreateEvent' && '🆕'}\n {event.type === 'WatchEvent' && '⭐'}\n {event.type === 'ForkEvent' && '🍴'}\n {event.type === 'IssuesEvent' && '🐛'}\n {event.type === 'PullRequestEvent' && '🔀'}\n {!['PushEvent', 'CreateEvent', 'WatchEvent', 'ForkEvent', 'IssuesEvent', 'PullRequestEvent'].includes(event.type) && '📋'}\n

{getEventDescription(event)}

\n {formatDate(event.created_at)}\n

\n ))}\n

\n);\n\nconst RawDataSection: React.FC<{ rawResponses: any }> = ({ rawResponses }) => {\n const [expandedSection, setExpandedSection] = useState(null);\n\n const toggleSection = (section: string) => {\n setExpandedSection(expandedSection === section ? null : section);\n };\n\n return (\n

\n 🔍 Raw API Responses\n

\n Click on any section below to view the raw JSON response from GitHub's API\n

\n {Object.entries(rawResponses).map(([key, data]) => (\n

\n toggleSection(key)}\n className=\"w-full px-4 py-3 text-left bg-gray-50 hover:bg-gray-100 rounded-t-lg flex items-center justify-between transition-colors\"\n >\n \n {key} API Response ({key === 'user' ? '1 object' : `${Array.isArray(data) ? data.length : 1} items`})\n \n \n {expandedSection === key ? '▼' : '▶'}\n \n \n {expandedSection === key && (\n

\n                  {JSON.stringify(data, null, 2)}\n

\n )}\n

\n ))}\n

\n 💡 API Information: This data is fetched from GitHub's REST API v3. \n The APIs used are: /users/{`{username}`}, /users/{`{username}`}/repos, \n and /users/{`{username}`}/events/public.\n

\n );\n};\n\n// Main App Component\nconst App: React.FC = () => {\n const [username, setUsername] = useState('');\n const [profileData, setProfileData] = useState(null);\n const [loading, setLoading] = useState(false);\n const [error, setError] = useState('');\n\n const fetchProfile = async (searchUsername: string) => {\n if (!searchUsername.trim()) return;\n\n setLoading(true);\n setError('');\n setProfileData(null);\n\n try {\n const response = await fetch(`/api/user/${encodeURIComponent(searchUsername.trim())}`);\n const data = await response.json();\n\n if (!response.ok) {\n throw new Error(data.error || 'Failed to fetch profile');\n }\n\n setProfileData(data);\n } catch (err) {\n setError(err instanceof Error ? err.message : 'An error occurred');\n } finally {\n setLoading(false);\n }\n };\n\n const handleSubmit = (e: React.FormEvent) => {\n e.preventDefault();\n fetchProfile(username);\n };\n\n // Load a default profile on mount\n useEffect(() => {\n fetchProfile('octocat');\n }, []);\n\n return (\n

\n GitHub Profile Viewer\n

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

\n \n \n

\n\n {loading && }\n \n {error && }\n\n {profileData && (\n

\n \n \n \n \n \n

\n )}\n

\n );\n};\n\n// Render the app\nconst root = createRoot(document.getElementById('root')!);\nroot.render();","deleted","label",[168,150],"frontend","permalink","https://www.val.town/x/anand_g/GIthubProfile/code/frontend/index.tsx","extension","actionData","errors"]