site-github-card

1"use client";
2 
3import { useState } from "react";
4import Head from "next/head";
5import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
6import { Card } from "@/components/ui/card";
7import { Input } from "@/components/ui/input";
8import { Button } from "@/components/ui/button";
9import { Icon } from "@iconify/react";
10 
11interface GitHubUser {
12    login: string;
13    name: string;
14    bio: string;
15    avatar_url: string;
16    followers: number;
17    following: number;
18    public_repos: number;
19    html_url: string;
20    email?: string;
21    twitter_username?: string;
22    blog?: string;
23}
24 
25interface ContributionDay {
26    date: string;
27    level: number;
28    count: number;
29}
30 
31export default function GitHubCard() {
32    const [username, setUsername] = useState("");
33    const [userData, setUserData] = useState<GitHubUser | null>(null);
34    const [loading, setLoading] = useState(false);
35    const [error, setError] = useState<string | null>(null);
36 
37    // Generate realistic contribution data with proper GitHub-like structure
38    const generateContributions = (): ContributionDay[] => {
39        const contributions: ContributionDay[] = [];
40        const today = new Date();
41        const startDate = new Date(
42            today.getFullYear() - 1,
43            today.getMonth(),
44            today.getDate(),
45        );
46 
47        // Start from the Sunday of the week containing startDate
48        const startSunday = new Date(startDate);
49        startSunday.setDate(startDate.getDate() - startDate.getDay());
50 
51        for (let i = 0; i < 371; i++) {
52            // ~53 weeks * 7 days
53            const date = new Date(startSunday);
54            date.setDate(startSunday.getDate() + i);
55 
56            const dayOfWeek = date.getDay();
57            const isWeekend = dayOfWeek === 0 || dayOfWeek === 6;
58            const baseIntensity = isWeekend ? 0.2 : 0.6;
59            const randomFactor = Math.random();
60            const intensity = baseIntensity * randomFactor;
61 
62            let level = 0;
63            let count = 0;
64            if (intensity > 0.7) {
65                level = 4;
66                count = Math.floor(Math.random() * 10) + 10;
67            } else if (intensity > 0.5) {
68                level = 3;
69                count = Math.floor(Math.random() * 8) + 5;
70            } else if (intensity > 0.3) {
71                level = 2;
72                count = Math.floor(Math.random() * 5) + 2;
73            } else if (intensity > 0.1) {
74                level = 1;
75// … truncated