From 49419654a0e979ffed86b84d2bda9dc9d2630b31 Mon Sep 17 00:00:00 2001
From: cfngc4594 <cfngc4594@gmail.com>
Date: Tue, 13 May 2025 16:47:11 +0800
Subject: [PATCH] feat(problemset): enhance header component with back button
 and className prop

- Replace problem-header.tsx with new header.tsx implementation
- Add BackButton functionality to navigate to home page
- Make className prop configurable using cn utility
- Maintain existing user avatar functionality
---
 src/features/problemset/components/header.tsx | 25 +++++++++++++++++++
 .../components/problemset-header.tsx          | 18 -------------
 2 files changed, 25 insertions(+), 18 deletions(-)
 create mode 100644 src/features/problemset/components/header.tsx
 delete mode 100644 src/features/problemset/components/problemset-header.tsx

diff --git a/src/features/problemset/components/header.tsx b/src/features/problemset/components/header.tsx
new file mode 100644
index 0000000..f560d10
--- /dev/null
+++ b/src/features/problemset/components/header.tsx
@@ -0,0 +1,25 @@
+import { cn } from "@/lib/utils";
+import { Suspense } from "react";
+import { BackButton } from "@/components/back-button";
+import { UserAvatar, UserAvatarSkeleton } from "@/components/user-avatar";
+
+interface ProblemsetHeaderProps {
+  className?: string;
+}
+
+export const ProblemsetHeader = ({ className }: ProblemsetHeaderProps) => {
+  return (
+    <header className={cn("flex h-12 flex-none items-center", className)}>
+      <div className="container mx-auto flex h-full items-center justify-between px-4">
+        <div className="flex items-center">
+          <BackButton href="/" />
+        </div>
+        <div className="flex items-center">
+          <Suspense fallback={<UserAvatarSkeleton />}>
+            <UserAvatar />
+          </Suspense>
+        </div>
+      </div>
+    </header>
+  );
+};
diff --git a/src/features/problemset/components/problemset-header.tsx b/src/features/problemset/components/problemset-header.tsx
deleted file mode 100644
index b72a886..0000000
--- a/src/features/problemset/components/problemset-header.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import { Suspense } from "react";
-import { UserAvatar, UserAvatarSkeleton } from "@/components/user-avatar";
-
-const ProblemsetHeader = () => {
-  return (
-    <header className="flex h-12 flex-none items-center">
-      <div className="container mx-auto flex h-full items-center justify-end px-4">
-        <div className="flex items-center">
-          <Suspense fallback={<UserAvatarSkeleton />}>
-            <UserAvatar />
-          </Suspense>
-        </div>
-      </div>
-    </header>
-  );
-};
-
-export { ProblemsetHeader };