devb.io/www/components/AboutSection.tsx at 37ce7a6a45a5a7626add165067e9a5759e77e2f1 · sunithvs/devb.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
import Badge from "@/components/Badge";
import { getUserProfile, getUserProjects } from "@/lib/api";
import { ArrowDown } from "lucide-react";

export async function AboutSection({ username }: { username: string }) {
  const user = await getUserProfile(username);
  const userProjects = await getUserProjects(username);

  if (!user) return null;

  return (
    <>
      <div className="text-2xl font-bold mb-4 animate-fade-in">
        <h2>
          Get to know me <ArrowDown strokeWidth={2} className="inline " />
        </h2>
      </div>
      <div className="flex flex-col lg:flex-row gap-4">
        <div
          className="flex flex-col gap-4 flex-1 animate-slide-right"
          style={{ animationDelay: "100ms" }}
        >
          <div className="bg-white rounded-xl p-6 border-1 border-black border-b-4 transition-all duration-300 hover:shadow-lg hover:-translate-y-1">
            <h2 className="text-xl font-bold mb-4">💻 Languages</h2>
            <div className="flex flex-wrap gap-3">
              {userProjects?.top_languages?.map((language, index) => (
                <div
                  key={index}
                  className="mb-2 animate-fade-in"
                  style={{ animationDelay: `${index * 100}ms` }}
                >
                  <Badge label={language[0]} />
                </div>
              ))}
            </div>
          </div>

          <div className="flex gap-4">
            {user.issues_closed > 0 && (
              <div
                className="bg-[#B9FF66] rounded-xl p-6 border-1 border-black border-b-4 flex-1 transition-all duration-300 hover:shadow-lg hover:-translate-y-1 animate-fade-in"
                style={{ animationDelay: "300ms" }}
              >
                <h2 className="font-bold mb-2">Issue Closed</h2>
                <p
                  className="text-2xl font-bold animate-count-up"
                  data-value={user.issues_closed}
                >
                  {user.issues_closed}
                </p>
              </div>
            )}

            {user.pull_requests_merged > 0 && (
              <div
                className="bg-white rounded-xl p-6 border-1 border-black border-b-4 flex-1 transition-all duration-300 hover:shadow-lg hover:-translate-y-1 animate-fade-in"
                style={{ animationDelay: "400ms" }}
              >
                <h2 className="font-bold mb-2">PR Merged</h2>
                <p
                  className="text-2xl font-bold animate-count-up"
                  data-value={user.pull_requests_merged}
                >
                  {user.pull_requests_merged}
                </p>
              </div>
            )}
          </div>
        </div>

        <div
          className="flex flex-col gap-4 animate-slide-left"
          style={{ animationDelay: "200ms" }}
        >
            { user?.about &&
                <div
                    className="bg-white rounded-xl p-6 border-1 border-black border-b-4 transition-all duration-300 hover:shadow-lg hover:-translate-y-1">
                    <h2 className="text-xl font-bold mb-4">🤔 About</h2>
                    <p className="text-gray-700">
                        {user?.about}
                    </p>
                </div>}

          {user?.location && (<div
              className="bg-[#B9FF66] rounded-xl p-6 border-1 border-black border-b-4 col-span-2 transition-all duration-300 hover:shadow-lg hover:-translate-y-1 animate-fade-in"
              style={{animationDelay: "500ms"}}
          >
            <h2 className="text-xl font-bold mb-2">📍 Location</h2>
            <p>{user?.location}</p>
          </div>)}
        </div>
      </div>
    </>
  );
}