From b1ce906f2f66ef08c1c7a0adb099992231459b34 Mon Sep 17 00:00:00 2001
From: Jun-te Kim <juntekim@googlemail.com>
Date: Wed, 25 Feb 2026 12:33:43 +0000
Subject: [PATCH] added new file

---
 .../your-projects/live/ExpandableCountBar.tsx | 34 +++++++++++++++++++
 1 file changed, 34 insertions(+)
 create mode 100644 src/app/portfolio/[slug]/(portfolio)/your-projects/live/ExpandableCountBar.tsx

diff --git a/src/app/portfolio/[slug]/(portfolio)/your-projects/live/ExpandableCountBar.tsx b/src/app/portfolio/[slug]/(portfolio)/your-projects/live/ExpandableCountBar.tsx
new file mode 100644
index 00000000..9da2771e
--- /dev/null
+++ b/src/app/portfolio/[slug]/(portfolio)/your-projects/live/ExpandableCountBar.tsx
@@ -0,0 +1,34 @@
+"use client"
+
+interface ExpandableCountBarProps<T> {
+  title: string
+  items: T[]
+  onClick?: (items: T[]) => void
+  className?: string
+}
+
+export default function ExpandableCountBar<T>({
+  title,
+  items,
+  onClick,
+  className = "",
+}: ExpandableCountBarProps<T>) {
+
+  const count = items.length
+
+  return (
+    <div
+      onClick={() => onClick?.(items)}
+      className={`w-full cursor-pointer rounded-xl border bg-white shadow-sm hover:shadow-md transition-all duration-200 p-5 flex justify-between items-center ${className}`}
+    >
+      <div className="text-base font-semibold text-gray-800">
+        {title}
+      </div>
+
+      <div className="flex items-center gap-2 text-sm text-gray-500">
+        <span>{count} items</span>
+        <span className="text-xs">▼</span>
+      </div>
+    </div>
+  )
+}
\ No newline at end of file