From e735ebe72862db2ae33d49363f9a1c90df86a0e3 Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Fri, 22 May 2026 07:25:19 +0000
Subject: [PATCH] =?UTF-8?q?=F0=9F=A7=B9=20Extract=20UserPage=20into=20smal?=
 =?UTF-8?q?ler=20components?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: is0692vs <135803462+is0692vs@users.noreply.github.com>
---
 .../components/BackgroundDecoration.tsx       | 11 +++
 .../[username]/components/ErrorMessages.tsx   | 22 ++++++
 .../[username]/components/UserSummaryGrid.tsx | 52 ++++++++++++++
 src/app/[username]/page.tsx                   | 70 ++-----------------
 4 files changed, 92 insertions(+), 63 deletions(-)
 create mode 100644 src/app/[username]/components/BackgroundDecoration.tsx
 create mode 100644 src/app/[username]/components/ErrorMessages.tsx
 create mode 100644 src/app/[username]/components/UserSummaryGrid.tsx

diff --git a/src/app/[username]/components/BackgroundDecoration.tsx b/src/app/[username]/components/BackgroundDecoration.tsx
new file mode 100644
index 00000000..8eb457c7
--- /dev/null
+++ b/src/app/[username]/components/BackgroundDecoration.tsx
@@ -0,0 +1,11 @@
+export default function BackgroundDecoration() {
+  return (
+    <div className="absolute inset-0 overflow-hidden pointer-events-none fixed">
+      <div className="absolute -top-[10%] -right-[10%] w-[60%] h-[60%] rounded-full bg-accent opacity-5 blur-[120px] animate-pulse-slow" />
+      <div
+        className="absolute top-[40%] -left-[10%] w-[50%] h-[50%] rounded-full bg-success opacity-5 blur-[120px] animate-pulse-slow"
+        style={{ animationDelay: "2s" }}
+      />
+    </div>
+  );
+}
diff --git a/src/app/[username]/components/ErrorMessages.tsx b/src/app/[username]/components/ErrorMessages.tsx
new file mode 100644
index 00000000..b867c641
--- /dev/null
+++ b/src/app/[username]/components/ErrorMessages.tsx
@@ -0,0 +1,22 @@
+type Props = {
+  errors: { section: string; message: string }[];
+};
+
+export default function ErrorMessages({ errors }: Props) {
+  if (!errors || errors.length === 0) {
+    return null;
+  }
+
+  return (
+    <div className="mb-6 space-y-2 animate-slide-up">
+      {errors.map((err) => (
+        <div
+          key={err.section}
+          className="rounded-md border border-danger/30 bg-danger/10 px-4 py-3 text-sm text-danger"
+        >
+          <strong>{err.section}:</strong> {err.message}
+        </div>
+      ))}
+    </div>
+  );
+}
diff --git a/src/app/[username]/components/UserSummaryGrid.tsx b/src/app/[username]/components/UserSummaryGrid.tsx
new file mode 100644
index 00000000..18bb8a37
--- /dev/null
+++ b/src/app/[username]/components/UserSummaryGrid.tsx
@@ -0,0 +1,52 @@
+import SkillsCard from "@/components/SkillsCard";
+import ContributionsCard from "@/components/ContributionsCard";
+import ReposCard from "@/components/ReposCard";
+import ActivityCard from "@/components/ActivityCard";
+import InterestsCard from "@/components/InterestsCard";
+import AnimatedWrapper from "@/components/AnimatedWrapper";
+import { UserSummary } from "@/lib/types";
+
+type Props = {
+  summary: UserSummary;
+};
+
+export default function UserSummaryGrid({ summary }: Props) {
+  return (
+    <div className="mt-8 grid gap-6 lg:grid-cols-2">
+      {/* Skills */}
+      {summary.repositories && (
+        <AnimatedWrapper delay="0.2s">
+          <SkillsCard repositories={summary.repositories} />
+        </AnimatedWrapper>
+      )}
+
+      {/* Contributions */}
+      {summary.contributions && (
+        <AnimatedWrapper delay="0.3s">
+          <ContributionsCard contributions={summary.contributions} />
+        </AnimatedWrapper>
+      )}
+
+      {/* Repos */}
+      {summary.repositories && (
+        <AnimatedWrapper delay="0.4s">
+          <ReposCard repositories={summary.repositories} />
+        </AnimatedWrapper>
+      )}
+
+      {/* Interests */}
+      {summary.interests && (
+        <AnimatedWrapper delay="0.5s">
+          <InterestsCard interests={summary.interests} />
+        </AnimatedWrapper>
+      )}
+
+      {/* Activity */}
+      {summary.activity && (
+        <AnimatedWrapper delay="0.6s">
+          <ActivityCard activity={summary.activity} />
+        </AnimatedWrapper>
+      )}
+    </div>
+  );
+}
diff --git a/src/app/[username]/page.tsx b/src/app/[username]/page.tsx
index 17f1c5b0..43750adb 100644
--- a/src/app/[username]/page.tsx
+++ b/src/app/[username]/page.tsx
@@ -9,15 +9,14 @@ import { UserNotFoundError } from "@/lib/types";
 import ShareButtons from "@/components/ShareButtons";
 import CardGenerator from "@/components/CardGenerator";
 import ProfileCard from "@/components/ProfileCard";
-import SkillsCard from "@/components/SkillsCard";
-import ContributionsCard from "@/components/ContributionsCard";
-import ReposCard from "@/components/ReposCard";
-import ActivityCard from "@/components/ActivityCard";
-import InterestsCard from "@/components/InterestsCard";
 import AnimatedWrapper from "@/components/AnimatedWrapper";
 import ThemeController from "@/components/ThemeController";
 import MyPageBanner from "@/components/MyPageBanner";
 
+import BackgroundDecoration from "./components/BackgroundDecoration";
+import ErrorMessages from "./components/ErrorMessages";
+import UserSummaryGrid from "./components/UserSummaryGrid";
+
 type Props = {
   params: Promise<{ username: string }>;
 };
@@ -62,30 +61,11 @@ export default async function UserPage({ params }: Props) {
         topLanguageColor={summary.repositories?.languages[0]?.color}
       />
 
-      {/* Background decoration */}
-      <div className="absolute inset-0 overflow-hidden pointer-events-none fixed">
-        <div className="absolute -top-[10%] -right-[10%] w-[60%] h-[60%] rounded-full bg-accent opacity-5 blur-[120px] animate-pulse-slow" />
-        <div
-          className="absolute top-[40%] -left-[10%] w-[50%] h-[50%] rounded-full bg-success opacity-5 blur-[120px] animate-pulse-slow"
-          style={{ animationDelay: "2s" }}
-        />
-      </div>
+      <BackgroundDecoration />
 
       {/* Main */}
       <main className="mx-auto w-full max-w-6xl flex-1 px-4 py-8 relative z-10 animate-fade-in">
-        {/* Errors */}
-        {summary.errors.length > 0 && (
-          <div className="mb-6 space-y-2 animate-slide-up">
-            {summary.errors.map((err) => (
-              <div
-                key={err.section}
-                className="rounded-md border border-danger/30 bg-danger/10 px-4 py-3 text-sm text-danger"
-              >
-                <strong>{err.section}:</strong> {err.message}
-              </div>
-            ))}
-          </div>
-        )}
+        <ErrorMessages errors={summary.errors} />
 
         <MyPageBanner username={username} />
 
@@ -105,43 +85,7 @@ export default async function UserPage({ params }: Props) {
           </AnimatedWrapper>
         )}
 
-        {/* Grid */}
-        <div className="mt-8 grid gap-6 lg:grid-cols-2">
-          {/* Skills */}
-          {summary.repositories && (
-            <AnimatedWrapper delay="0.2s">
-              <SkillsCard repositories={summary.repositories} />
-            </AnimatedWrapper>
-          )}
-
-          {/* Contributions */}
-          {summary.contributions && (
-            <AnimatedWrapper delay="0.3s">
-              <ContributionsCard contributions={summary.contributions} />
-            </AnimatedWrapper>
-          )}
-
-          {/* Repos */}
-          {summary.repositories && (
-            <AnimatedWrapper delay="0.4s">
-              <ReposCard repositories={summary.repositories} />
-            </AnimatedWrapper>
-          )}
-
-          {/* Interests */}
-          {summary.interests && (
-            <AnimatedWrapper delay="0.5s">
-              <InterestsCard interests={summary.interests} />
-            </AnimatedWrapper>
-          )}
-
-          {/* Activity */}
-          {summary.activity && (
-            <AnimatedWrapper delay="0.6s">
-              <ActivityCard activity={summary.activity} />
-            </AnimatedWrapper>
-          )}
-        </div>
+        <UserSummaryGrid summary={summary} />
       </main>
 
       {/* Footer */}